首頁輪播圖
阿新 • • 發佈：2018-03-03
style use outer dex nbsp list his hover mov
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <style> * { margin: 0px; padding: 0px; /*會將ul中的padding變為0 將前面的小圓點擠入圖片下*/ text-align: center; } li{ list-style-type: none; } .outer{ width: 440px; height: 220px; border: 5px dashed chartreuse; margin: 0 auto; position: relative; } .num{ position: absolute; left:50%; margin-left: -75px; bottom: 5px; font-size: 0px; } .num li{ height: 20px; width: 20px; background-color: darkgray; border-radius: 50%; vertical-align: center; line-height: 20px; display: inline-block; font-size: 16px; margin: 5px; cursor: pointer; /*float: left;*/ } .outer .img li{ position: absolute; top:0px; left:0px; float: left; } /*.outer .img:after{* 只對float有用/ /*content:‘‘;*/ /*height:0px;*/ /*visibility: hidden;*/ /*display: block;*/ /*clear: both;*/ /*}*/ .button{ position: absolute; height: 60px; width: 40px; background-color: white; opacity: 0.5; line-height: 60px; font-size: 40px; top:50%; margin-top: -30px; font-weight: bold; display: none; } .btn_left{ left:10px; } .btn_right{ right:10px; } .outer:hover .button{ display: block; } .outer .num .current{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li> <img src="1.jpg"> </li> <li> <img src="2.jpg"> </li> <li> <img src="3.jpg"> </li> <li> <img src="4.jpg"> </li> <li> <img src="5.jpg"> </li> </ul> <ul class="num"> <li>1</li><!--換行時會出現一個占位符：解決方法：不換行或者font-size：0px--> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="btn_left button"> < </div> <div class="btn_right button"> > </div> </div> </body> </html> <script> <!--$()加載後自執行,同時也是一個私有域--> $(function(){ i=0; $(".num li").first().addClass(‘current‘); $(".num li").mouseover(function(){ $(this).addClass("current").siblings().removeClass(‘current‘); var index=$(this).index(); i=index; $(‘.img li‘).eq(index).fadeIn(1000).siblings().fadeOut(1000); }); //定時器開始 var Id = setInterval(move,1500); function move() { i++; if(i==5) i=0; if(i<0) i=4; $(".num li").eq(i).addClass("current").siblings().removeClass(‘current‘); $(‘.img li‘).eq(i).fadeIn(1000).siblings().fadeOut(1000); } //定時器停止 hover相對於mouseover可以出現兩個函數，入和出 不需要mouseout $(".outer").hover(function(){ clearInterval(Id); },function () { Id=setInterval(move,1500); }); $(‘.btn_left‘).click(function(){ i=i-2; move(); }); $(‘.btn_right‘).click(function(){ move(); }); }); </script>
首頁輪播圖