| <! DOCTYPE html> | |
| <meta http-equiv= "content-type" content= "text/html; charset=utf-8" /> | |
| <title></title> | |
| <script type= "text/javascript" src= ". /jquery/jquery-1.8.1.js "></script> | |
| <script type= "text/javascript" > | |
| var i=0; | |
| var timer; | |
| $ (function () { | |
| $ (". IG"). EQ (0). Show (). siblings (). Hide (); | |
| ShowTime (); | |
| $ (". tab"). Hover (function () { | |
| i=$ (This). index (); | |
| Show (); | |
| Clearinterval (timer); | |
| },function () { | |
| ShowTime () | |
| }); | |
| $ (". Btn1"). Click (function () { | |
| Clearinterval (timer); | |
| if (i==0) { | |
| i=5; | |
| } | |
| i--; | |
| Show (); | |
| ShowTime (); | |
| }) | |
| $ (". Btn2"). Click (function () { | |
| Clearinterval (timer); | |
| if (i==4) { | |
| I=-1; | |
| } | |
| i++; | |
| Show (); | |
| ShowTime (); | |
| }) | |
| }) | |
| function Show () { | |
| $ (". IG"). EQ (i). FadeIn (+). Siblings (). FadeOut (300); | |
| $ (". tab"). EQ (i). addclass ("BG"). Siblings (). Removeclass ("BG") | |
| } | |
| function ShowTime () { | |
| Timer=setinterval (function () { | |
| i++; | |
| if (i==5) { | |
| i=0; | |
| }; | |
| Show (); | |
| },3000) | |
| } | |
| </script> | |
| <style type= "text/css" > | |
| *{margin:0;padding:0;} | |
| . Ig{position:absolute;} | |
| . Btn{position:absolute; | |
| width:60px; | |
| height:90px; | |
| Background-color:rgba (0,0,0,0.5) | |
| Color: #fff; | |
| Text-align:center; | |
| line-height:90px; | |
| font-size:40px; | |
| top:95px; | |
| Cursor:pointer; | |
| } | |
| . btn2{ | |
| left:580px; | |
| } | |
| Ul{list-style:none;} | |
| #tabs {position:absolute;top:260px;left:200px;} | |
| . Tab{width:30px;height:30px;background: #5388e8; Float:left;line-height:30px;text-algin:center;color: #fff; Margin-right:10px;border-radius:100%;cursor:pointer} | |
| . bg{background:red;} | |
| </style> | |
| <body> | |
| <div id= "igs" > | |
| <div class= "ig" >src= "img/1.jpg" ></div> | |
| <div class= "ig" >src= "img/2.jpg" ></div> | |
| <div class= "ig" >src= "img/3.jpg" ></div> | |
| <div class= "ig" >src= "img/4.jpg" ></div> | |
| <div class= "ig" >src= "img/5.jpg" ></div> | |
| </div> | |
| <div class= "btn btn1" ><</div> | |
| <div class= "btn btn2" >></div> | |
| <div id= "tabs" > | |
| <div class= "tab BG" >1</div> | |
| <div class= "tab" >2</div> | |
| <div class= "tab" >3</div> | |
| <div class= "tab" >4</div> | |
| <div class= "tab" >5</div> | |
| </div> | |
| </body> | |
Photo Carousel Source Code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
