老师，帮忙解答问题，因为不能上传文件夹，所以jQuery与图片麻烦老师那边弄下，谢谢。
1，为什么图片到第五张过度到第一张时，看起来很变扭，下面的小圆点不能同步，延时了一会。2，点击小圆点切换图片，过一会图片会越来越快，这是怎么回事呢？<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.js"></script>
<style>
.banner{width:500px;height:300px;overflow:hidden;display:flex;background:silver;position:relative;
margin:11px auto;}
.inner{width:5000px;height:300px;display:flex;}
.ig{width:500px;height:300px;}
.ig img{width:500px;height:300px;}
.dots{position:absolute;bottom:5px;width:100%;text-align:center;}
.dots span{width:10px;height:10px;border:1px solid white;display:inline-block;
border-radius:50%;cursor:pointer;}
.a3{background:white;}
.wrap{position:absolute;display:flex;}
</style>
</head>
<body>
<div class="banner">
<div class="inner">
<div class="wrap">
<div class="ig">
<a href="#"><img src="img/banner1.jpg" alt=""></a>
</div>
<div class="ig">
<a href="#"><img src="img/banner2.jpg" alt=""></a>
</div>
<div class="ig">
<a href="#"><img src="img/banner3.jpg" alt=""></a>
</div>
<div class="ig">
<a href="#"><img src="img/banner4.jpg" alt=""></a>
</div>
<div class="ig">
<a href="#"><img src="img/banner1.jpg" alt=""></a>
</div>
</div>
</div>
<div class="dots">
<span class="a3"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
$(function(){
var index=0,timer;
//自动播放
function auto(){
timer=setInterval(function(){
index++;
if(index==5){
$('.dots span').eq(0).addClass('a3').siblings().removeClass('a3')
index=0
}else{
$('.dots span').eq(index).addClass('a3').siblings().removeClass('a3')
}
$('.wrap').animate({
'left':-index*($('.ig').width())
},1000)
},1000)
}
auto()
//点击播放
$('.dots span').click(function(){
clearInterval(timer)
var a=$(this).index()
changeimg(a)
setTimeout(function(){
auto();
},5000)
})
//调用函数
function changeimg(num){
$('.dots span').eq(num).addClass('a3').siblings().removeClass('a3')
$('.wrap').animate({
'left':-num*($('.ig').width())
},1000)
}
})
</script>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星