實現的原理：首先把要輪播的圖片通過ul li顯示在一行。然後把ul li img圖片全部隱藏起來.最後把圖片按從左向右的順序時行 顯示，根據要顯示的圖片寬度作爲距離來顯示對應圖片。
1、直接上html代碼
<html>
<head>
<title>圖片滑動</title>
<link rel="stylesheet" href="picslider.css">
<script src="jquery-3.5.0.min.js"></script>
<script type="text/javascript">
$(function(){
var timer = null; //聲明一個全局定時器
var index = 0;
function next(){
index++;
if(index > 4){//圖片的總張數減1
/*
當圖片到最後一張時跳回第一張，本例中在最後一張中放入了第一張的圖片，爲實現無縫切換圖片的效果。
*/
$(".pic-list").animate({left:-(index)*600},800);
index = 0;
$(".pic-list").animate({left:0},0); //
}
$(".pic-list").animate({left:-index*600},800);
iconHover(index);
}
function autoCarousel(){
timer = setInterval(function(){ //設置自動播放的定時器
next();
//iconHover(index);
},2000)
}
autoCarousel();
//實現被選圖片對應圓點圖標索引更新
function iconHover(index){
$(".icon-list li").eq(index).addClass("active").siblings().removeClass("active");
}
})
</script>
</head>
<body>
<div id="slide">
<ul class="pic-list">
<li><img src="shoes1.png"></li>
<li><img src="shoes2.png"></li>
<li><img src="shoes3.png"></li>
<li><img src="shoes4.png"></li>
<li><img src="shoes1.png"></li>
</ul>
<ul class="icon-list">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
2、css代碼：
*{
margin: 0;
padding: 0;
}
ul,li{
list-style-type: none;
}
#slide{
height: 400px;
width: 600px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.pic-list{
width: 4200px;/*總的圖片橫排顯示寬度*/
height: 400px;
position: absolute;
top: 0;
left: 0;
}
.pic-list li{
float: left;
}
.pic-list li img{
width: 600px;
height: 400px;
}
.icon-list{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.icon-list li{
float: left;
margin: 0 5px;
height: 10px;
width: 10px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
}
.icon-list .active{
background: #fff;
}
3、頁面顯示效果如下圖：
如果大家使用有啥問題歡迎留言，以便我改進。