实现的原理：首先把要轮播的图片通过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、页面显示效果如下图：
如果大家使用有啥问题欢迎留言，以便我改进。
1839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
