准备工作：
1、准备几张大小相同的图片
完成功能：
1、自动轮播
2、手动轮播
3、点击二侧按钮前后切换图片
效果图：
完整代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .outer { 8 width: 590px; 9 height: 470px; 10 margin: 80px auto; 11 position: relative; 12 } 13 14 .img li { 15 position: absolute; 16 list-style: none; 17 top: 0px; 18 left: 0px; 19 } 20 21 .num { 22 position: absolute; 23 bottom: 15px; 24 left: 120px; 25 list-style: none; 26 } 27 28 .num li { 29 display: inline-block; 30 width: 18px; 31 height: 18px; 32 background-color: white; 33 border-radius: 50%; 34 text-align: center; 35 line-height: 18px; 36 margin-left: 10px; 37 } 38 39 .btn { 40 position: absolute; 41 top: 50%; 42 width: 30px; 43 height: 60px; 44 background-color: lightgray; 45 color: white; 46 text-align: center; 47 line-height: 60px; 48 font-size: 30px; 49 opacity: 0.6; 50 margin-top: -30px; 51 display: none; 52 } 53 54 .left_btn { 55 left: 0px; 56 } 57 58 .right_btn { 59 right: 0px; 60 } 61 62 .outer:hover .btn { 63 display: block; 64 } 65 66 .num .active { 67 background-color: red; 68 } 69 </style> 70 </head> 71 <body> 72 <div class="outer"> 73 <ul class="img"> 74 <li><a href="#"><img src="images/0.jpg" alt=""></a></li> 75 <li><a href="#"><img src="images/1.jpg" alt=""></a></li> 76 <li><a href="#"><img src="images/2.jpg" alt=""></a></li> 77 <li><a href="#"><img src="images/3.jpg" alt=""></a></li> 78 <li><a href="#"><img src="images/4.jpg" alt=""></a></li> 79 <li><a href="#"><img src="images/5.jpg" alt=""></a></li> 80 <li><a href="#"><img src="images/6.jpg" alt=""></a></li> 81 <li><a href="#"><img src="images/7.jpg" alt=""></a></li> 82 </ul> 83 <ul class="num"> 84 <!--<li class="active"></li>--> 85 <!--<li></li>--> 86 <!--<li></li>--> 87 <!--<li></li>--> 88 <!--<li></li>--> 89 <!--<li></li>--> 90 <!--<li></li>--> 91 <!--<li></li>--> 92 </ul> 93 <div class="left_btn btn"> <</div> 94 <div class="right_btn btn"> ></div> 95 </div> 96 </body> 97 <script src="jquery-3.3.1.min.js"></script> 98 <script> 99 var i = 0;100 // 通过JQuery获取img标签下li的个数，然后自动创建num标签下的按钮标签li101 var $img_num = $(".img li").length;102 for (var j = 0; j < $img_num; j++) {103 $(".num").append("<li>");104 }105 $(".num li").eq(0).addClass("active");106 107 // 手动轮播，绑定事件108 $(".num li").mouseover(function () {109 i = $(this).index();110 console.log(i);111 $(this).addClass("active");112 $(this).siblings().removeClass("active"); // 取消其他标签按钮的active113 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);114 })115 116 // 自动轮播117 var c = setInterval(GO_R,1500)118 119 function GO_R() {120 if (i == $img_num-1)121 {122 i = -1;123 }124 i++;125 $(".num li").eq(i).addClass("active")126 $(".num li").eq(i).siblings().removeClass("active") // 取消其他标签按钮的active127 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);128 }129 function GO_L(){130 if (i == 0)131 {132 i = $img_num;133 }134 i--;135 $(".num li").eq(i).addClass("active")136 $(".num li").eq(i).siblings().removeClass("active") // 取消其他标签按钮的active137 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);138 }139 // 悬浮，清除计时器140 $(".outer").hover(function () {141 clearInterval(c)142 },function () {143 c = setInterval(GO_R,1500)144 })145 146 // button 加定播147 // 绑定一148 $(".right_btn").click(GO_R)149 // 绑定二150 // $(".right_btn").bind("click",GO_R)151 152 $(".left_btn").click(GO_L)153 154 </script>155 </html>
