<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 520px;
height: 333px;
margin: 50px auto;
background-color: greenyellow;
padding: 10px 0;
position: relative;
overflow: hidden;
}
#imgList{
list-style: none;
position: absolute;
left: 0;
}
#imgList li{
float: left;
margin: 0 10px;
}
#navDiv{
position: absolute;
bottom: 15px;
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.5;
}
#navDiv a:hover{
background-color: black;
}
</style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
imgList.style.width = 520*imgArr.length+"px";
var navDiv = document.getElementById("navDiv");
var outer = document.getElementById("outer");
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
var allA = document.getElementsByTagName("a");
var index = 0;
allA[index].style.backgroundColor = "black";
for(var i = 0 ; i < allA.length ; i++){
allA[i].num = i;
allA[i].onclick = function(){
clearInterval(timer);
index = this.num;
setA();
move(imgList,"left",-520*index,20,function(){
autoChange();
});
};
}
autoChange();
function setA(){
if(index >= imgArr.length - 1){
index = 0;
imgList.style.left = 0;
}
for(var i=0 ; i<allA.length ; i++){
allA[i].style.backgroundColor = "";
}
allA[index].style.backgroundColor = "black";
};
var timer;
function autoChange(){
timer = setInterval(function(){
index++;
index %= imgArr.length;
move(imgList,"left",-520*index,20,function(){
setA();
});
},2000);
};
};
</script>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<div id="navDiv">
<a href="javascript: ;"></a>
<a href="javascript: ;"></a>
<a href="javascript: ;"></a>
<a href="javascript: ;"></a>
<a href="javascript: ;"></a>
</div>
</div>
</body>
</html>
index = imgArr.length - 1是赋值啊，要判断相等得是index == imgArr.length - 1
if(index == imgArr.length - 1)
比较相等是两个= ，一个=是赋值
你指得不行是报错了还是什么？我试了一下if不会运行index永远不会大于等于imgArr.length - 1
if(index >= imgArr.length - 1){
index = 0;
imgList.style.left = 0;
} //不会运行除非这样
if(index+1 >= imgArr.length - 1){
index = 0;
imgList.style.left = 0;
} //不会运行
您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632
非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！
速戳参与调研>>>https://t.csdnimg.cn/Kf0y