准备工作：
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>JQuery 图片轮播
原文地址：https://www.cnblogs.com/chenyanbin/p/10485200.html