本文共 1829 字，大约阅读时间需要 6 分钟。
| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| | <title></title> |
| | <script type="text/javascript" src=""></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=""></div> |
| | <div class="ig"><img src=""></div> |
| | <div class="ig"><img src=""></div> |
| | <div class="ig"><img src=""></div> |
| | <div class="ig"><img src=""></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> |
转载于:https://www.cnblogs.com/chaofei/p/5701393.html