在使用js实现html轮播图的时候想要在最后一张图的时候跳回第一张图，就是一直向右移动，但是设置imgList.style.left = 0 明明执行了却没生效，轮播到最后一张图片的时候会往回移动，像倒车一样。下面是页面代码
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#imgBox{
width: 516px;
height: 333px;
background-color: greenyellow;
padding: 8px 0;
margin: 50px auto;
overflow: hidden;
position: relative;
}
#imgList{
list-style: none;
position: absolute;
}
#imgList li{
float: left;
padding: 0 8px;
}
#imgNav{
position: absolute;
bottom: 20px;
}
#imgNav a{
width: 15px;
float: left;
height: 15px;
background-color: pink;
opacity:0.6;
margin: 0 5px;
}
#imgNav a:hover{
background-color:rgb(24, 136, 241);
}
</style>
<script src="js/tool.js"></script>
<script>
window.onload = function(){
var imgBox = document.getElementById("imgBox")
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
//设置imgNav的宽度
imgList.style.width = imgBox.offsetWidth*imgArr.length + "px";
var imgNav = document.getElementById("imgNav");
//获取imgNav中所有的A
var allA = document.getElementsByTagName("a");
//设置imgNav居中
//居中公式：（总体宽度 - 居中元素的宽度）/2
imgNav.style.left = (imgBox.offsetWidth - imgNav.offsetWidth)/2 + "px";
//设置默认索引为0
var index = 0;
//设置默认选择元素颜色
allA[index].style.backgroundColor = "rgb(24, 136, 241)";
//遍历数组allA，为所有的A绑定单击响应函数
for(var i=0; i < allA.length; i++){
allA[i].num = i;
allA[i].onclick = function(){
index = this.num;
imgList.style.left= -516*index +"px";
move(imgList, "left", -516*index, 30, function(){
setA();
})
}
}
//调用自动切换函数
autoChange();
//设置选中a样式的函数
function setA(){
//判断是否是最后一张图片
**if(index >= imgArr.length - 1){
//是最后一张则跳为第一张
imgList.style.left = 0 +"px";
//索引初始化
index = 0;
//判断在网页中查看if是否执行
alert("初始化完毕");
} **
//将所有a初始化
for(var i = 0; i < allA.length; i++){
allA[i].style.backgroundColor = "";
}
//将选中的a变色
allA[index].style.backgroundColor = "rgb(24, 136, 241)";
}
//设置自动切换函数
function autoChange(){
setInterval(function(){
index++;
index %= imgArr.length;
move(imgList, "left", -516*index, 30,function(){
setA();
})
},3000)
}
}
</script>
</head>
<body>
<div id="imgBox">
<ul id="imgList">
<li><img src="img/01.jpg" ></li>
<li><img src="img/02.jpg" ></li>
<li><img src="img/03.jpg" ></li>
<li><img src="img/04.jpeg" ></li>
<li><img src="img/05.jpg" ></li>
<li><img src="img/01.jpg" ></li>
</ul>
<div id="imgNav">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
下面是move函数的代码
/*
创建一个移动函数
obj为调用的对象
attribute为修改的属性
target为最终目标
speed为动作的速度
callBack为回调函数
*/
function move(obj, attribute, target, speed, callBack){
clearInterval(obj.timer);
//获取当前obj属性
var current = parseInt(getStyle(obj , attribute));
//判断速度方向
if(current>target){
speed = -speed;
}
obj.timer = setInterval(function(){
var oldValue = parseInt(getStyle(obj , attribute));
var newValue = oldValue + speed;
//判断函数是否达到目标位置
if(speed > 0 && newValue >= target || speed < 0 && newValue <= target){
//使对象停在目标上
newValue = target;
//关闭计时器
clearInterval(obj.timer);
callBack && callBack();
}
obj.style[attribute] = newValue + "px";
},30)
}
function getStyle(obj , name){
if(window.getComputedStyle){//判断兼容性
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}
