javascript - 关于"轮播",为什么我的蓝色框不能被消除?
本文介绍了javascript - 关于"轮播",为什么我的蓝色框不能被消除?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
各位,帮我看下,为什么蓝色框不能被消除,虽然我已经解决了这个问题,但是,我还是不明白为什么蓝色框不能被消除.谁能帮我一步步分析下JS代码的原理吗?
.......................
这是源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript">
window.onload= window.onresize= function () {
document.documentElement.style.fontSize= window.innerWidth/ 40+ "px";
}
</script>
<title>Document</title>
<style media="screen">
body,div{
padding: 0;
margin: 0;
font-size: 0;
letter-spacing: -4px;
}
div.father div.wrap .width0{
width: 0;
}
div.father{
width: 5rem;
height: 5rem;
/*overflow: hidden;*/
}
div.wrap{
width: 15rem;
height: 5rem;
overflow: hidden;
}
div.wrap div{
display: inline-block;
vertical-align: top;
width: 5rem;
height: 5rem;
transition: all 1s;
}
div div.div1{
background-color: green;
}
div div.div2{
background-color: yellow;
}
div div.div3{
background-color: blue;
}
div.wrap div a img{
width: 5rem;
height: 5rem;
}
</style>
</head>
<body>
<div class="father">
<div class="wrap">
<div class="div1">
<!-- <a href="#">
<img src="./images/youku_03.png" alt="">
</a> -->
</div>
<div class="div2">
<!-- <a href="#">
<img src="./images/youku_07.png" alt="">
</a> -->
</div>
<div class="div3">
<!-- <a href="#">
<img src="./images/youku_09.png" alt="">
</a> -->
</div>
</div>
</div>
<script type="text/javascript">
var divF= document.querySelector("div.father"),
divW= divF.querySelector("div.father div.wrap"),
divs= divW.querySelectorAll("div.wrap div"),
divH0= divW.querySelector(".width0"),
index= 0;
setInterval(function () {
console.log(index);
divs[index].classList.add("width0");
index++;
if(index> 2){
index= 0;
for(var i= 0; i< divs.length; i++){
divs[i].classList.remove("width0");
}
}
},2000);
</script>
</body>
</html>
..............
帮我一步步分析一下JS代码的原理就好...先谢谢了...
解决方案
// 我要把三个方块都藏起来
// 已经藏了两个了
setInterval(function () {
console.log(index); // index = 2, 要藏第三个！
divs[index].classList.add("width0"); // 第三个藏起来了！
index++; // index = 3 还有谁！！！
if(index> 2){ // true 没谁了。。。
index= 0; // 回到原点
for(var i= 0; i< divs.length; i++){
divs[i].classList.remove("width0"); // 把三个方块都拿出来
}
}
},2000);
// 搞了半天第三个方块被你藏起来又拿出来了。。。解决方案参考：
setInterval(function () {
console.log(index);
if(index> 2){
index= 0;
for(var i= 0; i< divs.length; i++){
divs[i].classList.remove("width0");
}
} else {
divs[index].classList.add("width0");
index++;
}
},2000);另：我觉得你可能需要百度一下javascript怎么打断点。
这篇关于javascript - 关于"轮播",为什么我的蓝色框不能被消除?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
