准备工作：
1、准备几张大小相同的图片
完成功能：
1、自动轮播
2、手动轮播
3、点击二侧按钮前后切换图片
JQuery插件地址:
链接：https://pan.baidu.com/s/1zNl2-zulPurl1Tqiu4jo6Q 提取码：2ir4
效果图：
完整代码：
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="/imported/posts/2019-03-06-10485200-0fd1ddab-jquery-图片轮播-详细注释说明-让你一看就会/images/0.jpg" alt=""></a></li>
75 <li><a href="#"><img src="/imported/posts/2019-03-06-10485200-0fd1ddab-jquery-图片轮播-详细注释说明-让你一看就会/images/1.jpg" alt=""></a></li>
76 <li><a href="#"><img src="/imported/posts/2019-03-06-10485200-0fd1ddab-jquery-图片轮播-详细注释说明-让你一看就会/images/2.jpg" alt=""></a></li>
77 <li><a href="#"><img src="/imported/posts/2019-03-06-10485200-0fd1ddab-jquery-图片轮播-详细注释说明-让你一看就会/images/3.jpg" alt=""></a></li>
78 <li><a href="#"><img src="/imported/posts/2019-03-06-10485200-0fd1ddab-jquery-图片轮播-详细注释说明-让你一看就会/images/4.jpg" alt=""></a></li>
79 <li><a href="#"><img src="/imported/posts/2019-03-06-10485200-0fd1ddab-jquery-图片轮播-详细注释说明-让你一看就会/images/5.jpg" alt=""></a></li>
80 <li><a href="#"><img src="/imported/posts/2019-03-06-10485200-0fd1ddab-jquery-图片轮播-详细注释说明-让你一看就会/images/6.jpg" alt=""></a></li>
81 <li><a href="#"><img src="/imported/posts/2019-03-06-10485200-0fd1ddab-jquery-图片轮播-详细注释说明-让你一看就会/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标签下的按钮标签li
101 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"); // 取消其他标签按钮的active
113 $(".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") // 取消其他标签按钮的active
127 $(".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") // 取消其他标签按钮的active
137 $(".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>