准备工作：
1、准备几张大小相同的图片
完成功能：
1、自动轮播
2、手动轮播
3、点击二侧按钮前后切换图片
JQuery插件地址:
链接：https://pan.baidu.com/s/1zNl2-zulPurl1Tqiu4jo6Q
提取码：2ir4
效果图：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
width: 590px;
height: 470px;
margin: 80px auto;
position: relative;
} .img li {
position: absolute;
list-style: none;
top: 0px;
left: 0px;
} .num {
position: absolute;
bottom: 15px;
left: 120px;
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: 10px;
} .btn {
position: absolute;
top: 50%;
width: 30px;
height: 60px;
background-color: lightgray;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.6;
margin-top: -30px;
display: none;
} .left_btn {
left: 0px;
} .right_btn {
right: 0px;
} .outer:hover .btn {
display: block;
} .num .active {
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href="#"><img src="data:images/0.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/6.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/7.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left_btn btn"> <</div>
<div class="right_btn btn"> ></div>
</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
var i = 0;
// 通过JQuery获取img标签下li的个数，然后自动创建num标签下的按钮标签li
var $img_num = $(".img li").length;
for (var j = 0; j < $img_num; j++) {
$(".num").append("<li>");
}
$(".num li").eq(0).addClass("active"); // 手动轮播，绑定事件
$(".num li").mouseover(function () {
i = $(this).index();
console.log(i);
$(this).addClass("active");
$(this).siblings().removeClass("active"); // 取消其他标签按钮的active
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}) // 自动轮播
var c = setInterval(GO_R,1500) function GO_R() {
if (i == $img_num-1)
{
i = -1;
}
i++;
$(".num li").eq(i).addClass("active")
$(".num li").eq(i).siblings().removeClass("active") // 取消其他标签按钮的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")
$(".num li").eq(i).siblings().removeClass("active") // 取消其他标签按钮的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_btn").click(GO_R)
// 绑定二
// $(".right_btn").bind("click",GO_R) $(".left_btn").click(GO_L) </script>
</html>