[英]SetInterval to do carousel. Two similar snippet, one is right, the other is wrong. Why?
I am doing a carousel sample using JavaScript. 我正在使用JavaScript进行轮播示例。 Is there any difference between 之间有什么区别
index++;
index == imgList.length && (index = 0);
show(index);
and 和
index++;
show(index);
index == imgList.length - 1 && (index = -1);
Because the code above can work,code below cannot. 因为上面的代码可以工作,所以下面的代码不能工作。 Here is all the code: 这是所有代码:
window.onload = function() { var numList = document.getElementById("numbers").getElementsByTagName("li"); var imgList = document.getElementById("imgs").getElementsByTagName("li"); var containBox = document.getElementById("box"); var index = 0; var timer = play = null; for (var i = 0; i < numList.length; i++) { numList[i].index = i; numList[i].onmouseover = function() { clearInterval(timer); show(this.index); }; } function show(a) { index = a; var opacity = 0; for (var i = 0; i < imgList.length; i++) { imgList[i].style.opacity = 0; } for (var i = 0; i < numList.length; i++) numList[i].className = ""; numList[index].className = "current"; timer = setInterval(function() { opacity += 2; imgList[index].style.opacity = opacity / 100; opacity == 100 && clearTimeout(timer); }, 20); } function autoPlay() { play = setInterval(function() { index++; show(index); index == imgList.length - 1 && (index = -1); // index++; // index == imgList.length && (index = 0); // show(index); }, 2000); } autoPlay(); containBox.onmouseover = function() { clearInterval(play); } containBox.onmouseout = function() { autoPlay(); } }
#box { width: 445px; margin: 0 auto; position: relative; } ul, li { padding: 0; margin: 0; } li { list-style-type: none; } #imgs { position: relative; } #imgs li { position: absolute; top: 0; left: 0; } #imgs img { width: 440px; height: 220px; } #numbers { position: absolute; right: 15px; top: 190px; } #numbers li { display: inline-block; background-color: #F90; width: 20px; height: 20px; border-radius: 20px; color: rgb(232, 227, 227); text-align: center; font-size: 12px; line-height: 20px; } #numbers .current { color: white; background-color: #f60; } #imgs li { opacity: 0; } #imgs .current { opacity: 1; }
<div id="box"> <ul id="imgs"> <li class="current"><img src="01.jpg" alt="01.jpg">1</li> <li><img src="02.jpg" alt="02.jpg">2</li> <li><img src="03.jpg" alt="03.jpg">3</li> <li><img src="04.jpg" alt="04.jpg">4</li> <li><img src="05.jpg" alt="05.jpg">5</li> </ul> <ul id="numbers"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>
When I code below, I debug in chrome devtools finding that when the index
first became 4 in line index = a
, then got error. 当我在下面编写代码时,我在chrome devtools中进行调试,发现当index
首次在index = a
变为4时,出现了错误。 I have been working on it for three hours. 我已经做了三个小时。 Help! 救命!
You need to set your index back to 0 so that it can loop back 您需要将索引设置回0,以便它可以环回
function autoPlay() {
play = setInterval(function() {
index = index > 4 ? index +1 : 0;
show(index);
}, 2000);
}
autoPlay();
window.onload = function() { var numList = document.getElementById("numbers").getElementsByTagName("li"); var imgList = document.getElementById("imgs").getElementsByTagName("li"); var containBox = document.getElementById("box"); var index = 0; var timer = play = null; for (var i = 0; i < numList.length; i++) { numList[i].index = i; numList[i].onmouseover = function() { clearInterval(timer); show(this.index); }; } function show(a) { index = a; var opacity = 0; for (var i = 0; i < imgList.length; i++) { imgList[i].style.opacity = 0; } for (var i = 0; i < numList.length; i++) numList[i].className = ""; numList[index].className = "current"; timer = setInterval(function() { opacity += 2; imgList[index].style.opacity = opacity / 100; opacity == 100 && clearTimeout(timer); }, 20); } function autoPlay() { play = setInterval(function() { index = index < 4? index+1 : 0; show(index); }, 2000); } autoPlay(); containBox.onmouseover = function() { clearInterval(play); } containBox.onmouseout = function() { autoPlay(); } }
#box { width: 445px; margin: 0 auto; position: relative; } ul, li { padding: 0; margin: 0; } li { list-style-type: none; } #imgs { position: relative; } #imgs li { position: absolute; top: 0; left: 0; } #imgs img { width: 440px; height: 220px; } #numbers { position: absolute; right: 15px; top: 190px; } #numbers li { display: inline-block; background-color: #F90; width: 20px; height: 20px; border-radius: 20px; color: rgb(232, 227, 227); text-align: center; font-size: 12px; line-height: 20px; } #numbers .current { color: white; background-color: #f60; } #imgs li { opacity: 0; } #imgs .current { opacity: 1; }
<div id="box"> <ul id="imgs"> <li class="current"><img src="01.jpg" alt="01.jpg">1</li> <li><img src="02.jpg" alt="02.jpg">2</li> <li><img src="03.jpg" alt="03.jpg">3</li> <li><img src="04.jpg" alt="04.jpg">4</li> <li><img src="05.jpg" alt="05.jpg">5</li> </ul> <ul id="numbers"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.