美好的一天,
我目前在javascript上遇到了一个问题。
我有一个基于此http://jsfiddle.net/pdb4kb1a/2的自动幻灯片循环。
现在我还在图像中添加了箭头,因此用户也可以自己来回走动。 这里的问题是,当我调用onClick()时,它继续重新调用slideShow(n)方法而不会中断'也没有重置'另一个。 所以我最终得到的是一个循环的召回,而另一个仍在运行,这在单击箭头按钮后创建了一个非常快速和迷失方向的循环。
如何在通话时重置我的slideShow()循环?
var imgArray = ['img/sleutels.jpg', 'img/naamborden.jpg', 'img/leer.jpg'];
var photoIndex = 2;
var photoId = document.getElementById('photoSlide');
function setIndex(n) {
slideShow((photoIndex + n));
}
function slideShow(n) {
photoId.className += "fadeOut";
setTimeout(appear, 500);
photoIndex++;
if (photoIndex == imgArray.length) {
photoIndex = 0;
}
console.log(photoIndex);
setTimeout(slideShow, 5000);
}
function appear() {
photoId.src = imgArray[photoIndex];
photoId.className = "";
}
slideShow();
亲切的问候
答案 0 :(得分:0)
您是否尝试将幻灯片显示超时保存在变量中并在onclick中重置?这样的事情:
var imgArray = [
'http://placehold.it/300x200',
'http://placehold.it/200x100',
'http://placehold.it/400x300'],
curIndex = 0;
imgDuration = 3000;
var slideTimeout;
document.getElementById('nextButton').addEventListener('click', onNextClick);
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function() {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
},1000);
nextIndex();
slideTimeout = setTimeout(slideShow, imgDuration);
}
slideShow();
function onNextClick(domEvent){
if (slideTimeout)
clearTimeout(slideTimeout);
nextIndex();
slideShow();
}
function nextIndex(){
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
}
#nextButton{
background-color: #aaa;
padding:4px 12px;
margin-bottom: 20px;
}
#slider {
opacity:1;
transition: opacity 1s;
display: block;
}
#slider.fadeOut {
opacity:0;
}
<span id="nextButton">NEXT</span>
<img id="slider" src="http://placehold.it/50x200">
仍然有一些代码需要改变,因为我不太喜欢你处理索引的方式,但是它有效...你只需要增强这个代码来处理“上一个”图像,你就会拥有你想要的东西;希望它有所帮助
答案 1 :(得分:0)
为了更好的结构,我会嵌套超时,然后存储超时的ID并清除它:
var appearId, showId;
function setIndex(n) {
slideShow((photoIndex + n));
}
function slideShow(n) {
photoId.className += "fadeOut";
photoIndex++;
if (photoIndex == imgArray.length) {
photoIndex = 0;
}
console.log(photoIndex);
if (appearId) { clearTimeout(appearId) }
appearId = setTimeout(appear, 500);
}
function appear() {
photoId.src = imgArray[photoIndex];
photoId.className = "";
if (showId) { clearTimeout(showId) }
showId = setTimeout(slideShow, 4500);
}
slideShow();