圖片循環顯示
阿新 • • 發佈：2018-07-11
src his hide tom utf-8 abs none 3.1 紅點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 790px; height: 340px; margin: 80px auto; position: relative;/*一個相對，其他都是絕對固定*/ } .img li{ position: absolute; list-style: none; top: 0; left: 0; } .num{ position: absolute; bottom: 18px; left: 270px; background-color: white; list-style: none; } .num li{ display: inline-block; width: 18px; height: 18px; background-color: white; border-radius: 50%; text-align: center; line-height: 18px; margin-left: 4px; } .btn{ position: absolute; top: 50%; /*left: 0;*/ width: 30px; height: 60px; background-color: lightgrey; color: white; text-align: center; line-height: 60px; font-size: 30px; opacity: 0.7; margin-top: -30px; display: none; } .left{ left: 0px; } .right{ right: 0px; } .outer:hover .btn{/*懸浮的時候顯示左右*/ display: inline-block; } .num .active{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> </ul> <ul class="num"> <!--<li class="active"></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> <script src="jquery-3.3.1.min.js"></script><!--不加此句$不識別--> <script> var img_num= $(".img li").length; for(var i=0;i<img_num;i++) { $(".num").append("<li></li>") } $(".num li").eq(0).addClass("active");//序列0加上類名active //手動輪播 $(".num li ").mouseover(function () { var index=$(this).index(); $(this).addClass("active").siblings().removeClass("active");//有無active //$(".img li").eq(index).show(1).siblings().hide() $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);//fadein 和show功能相同都是顯示，一個是淡出顯示一個是直接顯示 }); //自動輪播,紅點移動 var i=0; var c=setInterval(GO_R,500);//5秒走一次 function GO_R() { i++; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500); } </script> </body> </html>
圖片循環顯示