回来再作者道题发现好多都忘了。老师我这里为什么当idx>4时这边没有跳转到第一张图片呢？
来源：6-4 编写呼吸轮播特效
Vigorous阿炎
2020-11-23 20:58:59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.A{
position: relative;
width: 300px;
height: 300px;
}
.dic{
width: 300px;
height: 300px;
border: 1px solid black;
}
img{
height: 300px;
width: 300px;
}
ul li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
ul li:first-child{
opacity: 1;
}
</style>
</head>
<body>
<div class="A">
<ul class="dic" id="dic">
<li><img src="junren.jpg" alt=""></li>
<li><img src="1111.jpg" alt=""></li>
<li><img src="junren.jpg" alt=""></li>
<li><img src="1111.jpg" alt=""></li>
</ul>
</div>
<script>
var dic=document.getElementById('dic')
var lis=dic.getElementsByTagName('li')
var idx=0;
dic.onclick=function(){
lis[idx].style.opacity=0;
idx++;
if(idx>4)idx=0; //判断效果没能实现
lis[idx].style.opacity=1;
}
</script>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示
2回答
-
同学你好，问题解决如下：
1、第一段代码：html中只给了4张图，所以当索引值为3的时候代表的是第四张图，if判断里的条件语句应该是idx>3
参考如下:
2、第二段代码：建议if里面的代码块修改为idx=0；当idx>3时，图片回到第一张，重新进行轮播显示。
祝学习愉快！
1h020-11-24 -
Vigorous阿炎
提问者
2020-11-23
发现使用延时器也无法实现效果。第四张图片一直是空的。
(function(){
var bn_2=document.getElementById('bn_2') //获取ul
var lis=bn_2.getElementsByTagName('li') //获取li元素
var idx=0;
var timer;
// bn_2.onclick=function(){
// lis[idx].style.opacity=0;
// idx++;
// if(idx>3)idx=0;
// lis[idx].style.opacity=1;
// }
timer= setInterval(function(){
lis[idx].style.opacity=0;
idx++;
lis[idx].style.opacity=1;
if(idx>3){
clearInterval(timer)
}
},1000)
})()
0
相似问题