为什么不行?
来源：3-6 点击圆点切换图片（1）
慕神9477737
2019-08-08 15:21:23
var num=1;
var jsq=null;
var spans=byid("dots").getElementsByTagName("span");
function byid(id){
return typeof(id) === "string"?
document.getElementById(id):id;
}
function changeimg(){
byid("main").style.backgroundImage
="url(bg"+num+".jpg)";
}
//怎么用JS改背景图片?
function slideimg(){
changeimg();//为了一加载就出现页面不然要过三秒
jsq=setInterval(function auto(){
changeimg();
num++;
if(num>3){
num=1;
}
},3000)
for(var a=0;a<3;a++){
num=a+1;
spans[a].onclick=function abc(){
changeimg();
}
}
}
*{
margin: 0px;
padding: 0px;
text-decoration: none;
overflow: hidden;
}
.main{
position: relative;
width: 1200px;
height: 460px;
margin: 30px 74.5px 30px 74.5px;
}
.dots{
position: absolute;
right: 20px;
bottom: 35px;
}
.dots span{
border-radius: 50%;
background-color: rgba(7, 17, 27, 0.4);
cursor: pointer;
display: inline-block;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
width: 12px;
height: 12px;
margin-left: 8px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body onload="slideimg();">
<div class="main" id="main">
<div class="dots" id="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
请问我什么我这串代码点圆点还是不能切换背景图片？
for(var a=0;a<3;a++){
num=a+1;
spans[a].onclick=function abc(){
changeimg();
}
}这段代码中我把num放在function外面 num的值就不应该直接等于4了吧 ，但是为什么还是不行?
麻烦老师不要像下面这个回答一样 直接给代码让我参考，能解释一下为什么吗？我不需要老师直接把代码给我。
http://class.imooc.com/course/qadetail/141662
1回答
-
同学你好，这里num是不等于4，但是这里的num和之前的自动轮播的是使用的同一个num，比如自动轮播到第二张图片时，num为2，这时你点击圆点切换图片，不管点击那个圆点，num都会增加1，如果原来切换到第二张图片，点击圆点就会切换到第三张图片。
所以这里建议同学参考之前老师的回答，给changeimg()函数设置参数num，自动轮播使用num传入参数，而圆点导航时，定义let局部变量，传入局部变量的值。
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
0
相似问题