| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <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(300).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> | |
| </head> | |
| <body> | |
| <div id="igs"> | |
| <div class="ig"><img src="img/1.jpg"></div> | |
| <div class="ig"><img src="img/2.jpg"></div> | |
| <div class="ig"><img src="img/3.jpg"></div> | |
| <div class="ig"><img src="img/4.jpg"></div> | |
| <div class="ig"><img 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> | |
| </html> |
原文：http://www.cnblogs.com/chaofei/p/5701393.html