轮播代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.1.1.js"></script> <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: 0px; left: 280px; /*background-color: #dce7f4;*/ 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: 14px; } .btn{ position: absolute; top: 50%; width: 30px; height: 60px; background-color: lightgrey; color: white; text-align: center; line-height: 60px; font-size: 30px; opacity: 0.8; margin-top: -30px; display: none; } .left{ left: 0; } .right{ right: 0; } .outer:hover .btn{ display: block; } .num .active{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="img/1.jpg" alt=""></a></li> <li><a href=""><img src="img/2.jpg" alt=""></a></li> <li><a href=""><img src="img/3.jpg" alt=""></a></li> <li><a href=""><img src="img/4.jpg" alt=""></a></li> <li><a href=""><img src="img/5.jpg" alt=""></a></li> <li><a href=""><img src="img/6.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> // 通过jquery自动创建按钮标签 var img_num=$(".img li").length; for (var j=0;j<(img_num);j++){ $(".num").append("<li></li>") } $(".num li").eq(0).addClass("active"); //手动轮播 // $(".num li").mouseover(function () { // var index=$(this).index(); //this不应该加引号 // $("this").addClass("active").siblings().removeClass("active") // // }) $(".num li").mouseover(function () { // var index=$(this).index(); i=$(this).index(); $(this).addClass("active").siblings().removeClass("active"); //以下两种方法都可实现 // $(".img li").eq(index).show(1).siblings().hide() $(".img li").eq(index).stop().fadeIn(200).siblings().stop().fadeOut(200) }); //自动轮播 var c=setInterval(GO_R,1500); var i=0; function GO_R() { if(i==img_num-1){ i=-1 } i++; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000) } function GO_L() { if(i==0){ i=img_num } i--; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000) } $(".outer").hover(function () { clearInterval(c) },function () { c=setInterval(GO_R,1500) }) //button加定播 // $(".right").bind("click",GO_R) $(".right").click(GO_R); $(".left").click(GO_L); </script> </body> </html>
效果展示：
