gpt4 book ai didi

javascript - 滚动功能也会在页面加载时执行

转载 作者:太空宇宙 更新时间:2023-11-04 13:07:41 24 4
gpt4 key购买 nike

我做了一个jsfiddle作为对 How to build fullscreen slider like this? 的回答(现在暂停)
我知道滚动太快会导致错误,并且双向滚动会做同样的事情,但我的问题是当页面加载时,它会自动滚动一次
我使用的代码是

var leftImg = document.getElementsByClassName('left');
var rightImg = document.getElementsByClassName('right');
var cur = 0;
for (i=0; i<3; i++){
leftImg[i].style.zIndex = rightImg[i].style.zIndex = -(i+1);
}

window.onmousewheel = changeImage();

function changeImage() {
leftImg[cur].style.top= "-100%";
rightImg[cur].style.top= "100%";
setTimeout(function(){
window.onmousewheel = changeImage;
leftImg[cur].style.zIndex=rightImg[cur].style.zIndex=-(cur+4);
leftImg[cur].style.top=rightImg[cur].style.top="0";
cur++;
if(cur === 3) {
cur = 0;
for (i=0; i<3; i++){
leftImg[i].style.zIndex = rightImg[i].style.zIndex = -(i+1);
}
}
}, 3000);
window.onmousewheel = preventDefault;
}

为什么?

最佳答案

已编辑#2

不需要循环也不需要超时

var cur = 2;
var zIndex = -1;

window.onmousewheel = changeImage;
function changeImage() {

var leftImg = document.getElementsByClassName('left');
var rightImg = document.getElementsByClassName('right');
leftImg[cur].style.top = "-100%";
rightImg[cur].style.top = "100%";
if (leftImg[(cur + 1) % 3].style.top === "-100%") {
leftImg[(cur + 1) % 3].style.zIndex = rightImg[(cur + 1) % 3].style.zIndex = (zIndex);
leftImg[(cur + 1) % 3].style.top = rightImg[(cur + 1) % 3].style.top = "0%";

}
zIndex--;
cur--;
if (cur === -1) {
cur = 2;
}

}

参见 fiddle

关于javascript - 滚动功能也会在页面加载时执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38366599/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com