HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="css/輪播樣式.css">
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg"></a> </li>
<li><a href=""><img src="img/2.jpg"></a> </li>
<li><a href=""><img src="img/3.jpg"></a> </li>
<li><a href=""><img src="img/4.jpg"></a> </li>
<li><a href=""><img src="img/5.jpg"></a> </li>
<li><a href=""><img src="img/6.jpg"></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;
var i=0;
for (var j=0;j<img_num;j++){
$(".num").append("<li></li>")
}
// 爲第一個小點加成active
$(".num li").eq(0).addClass('active')
//手動輪播
$(" .num li").mouseover(function () {
var i = $(this).index();
//siblings 找到該元素的同胞元素
// 小按鈕變紅
$(this).addClass('active').siblings().removeClass("active");
//顯示圖片 stop 去掉其他圖片的的特效
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut()
})
//自動輪播
//設置定時器 1.5秒
var c=setInterval(GO_RUN,1500)
var i=0;
function GO_RUN() {
if (i==img_num-1){
i=-1
}
i++;
$(".num li").eq(i).addClass('active').siblings().removeClass("active");
//顯示圖片 stop 去掉其他圖片的的特效
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut()
}
function GO_lift() {
if (i==0){
i=img_num-1
}
i--;
$(".num li").eq(i).addClass('active').siblings().removeClass("active");
//顯示圖片 stop 去掉其他圖片的的特效
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut()
}
//鼠標停在上面，停止輪播，鼠標拿開，開始輪播
$(".outer").hover(function () {
clearInterval(c)
},function () {
c=setInterval(GO_RUN,1500)
})
// button 加定播 ,對右邊走
$(".right").click(GO_RUN)
// button 加定播 ,對左邊走
$(".left").click(GO_lift)
</script>
</body>
</html>
引入了一個js文件和一個css文件
css：
.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: 20px;
left: 270px;
list-style: none;
}
.num li{
display: inline-block; /*行內塊元素*/
width: 15px;
height: 15px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 28px;
margin-left: 4px;
}
.btn{
position: absolute;
top: 50%;
background-color: lightgray;
width: 30px;
height: 60px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top:-30px;
display: none;
}
.right{
right: 0;
}
.outer:hover .btn{
display: block;
}
/* 爲第一個輪播圖爲紅色點*/
.num .active{
background-color: red;
}
還有一個jquery-3.1.1.js文件，經常會用到的，太多了所以放個鏈接
https://download.csdn.net/download/qq_44699174/12440245
我設置成零積分下載了，可還是需要消耗積分，也可以去網上搜一下這個文件。