Trying to solve the challenge of creating a fullscreen slider similar to the one described in this question, I created a jsfiddle (currently on hold)
Despite knowing that scrolling too fast causes bugs and that scrolling both ways has the same effect, my main issue is that upon page load, it automatically scrolls once.
The code snippet utilized for this attempt:
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;
}
The persistent question is: Why does this behavior occur?