Question

我正在设计一个带有全屏轮播的网页。轮播会滑动到下一个图像，但是不会显示所需的图像。我认为问题出在我的javascript工作上，因为我不精通该语言，但也可能是html文本，我在下面的JSFiddle上包括了指向我程序的链接

	
let sliderImages = document.querySelectorAll('.slide');
	arrowLeft = document.querySelectorAll('#arrow-left');
	arrowRight = document.querySelectorAll('#arrow-right');
	current = 0;

//clear all images
function reset(){
	for (let i = 0; i < sliderImages.length; i++){
		sliderImages[i].style.display = 'none';	
}
}

//start Slider (carousel)
function startSlide(){
	reset();
	sliderImages[0].style.display = 'block';
}

 //show previous
 function slideLeft(){
 	reset();
 	sliderImages[current -1].style.display = 'block';
 	current--;
 }

 //show next
 function slideRight(){
 	reset();
 	sliderImages[current +1].style.display = 'block';
 	current++;
 }

 //Left arrow click
 arrowLeft.addEventlistener('click', function(){
 	if (current === 0){
 		current = sliderImages.length;
}
 	slideLeft();
});

 //Right arrow click
 arrowRight.addEventListener('click', function(){
 	if (current === sliderImages.length - 1){
 		current = -1;
}
 	slideRight();
});

 	startSlide();

Answer 1

看代码，您有2个错误：一个是您在arrowLeft.addEventListener中有一个错字，必须是arrowLeft.addEventlistener，第二个是querySelectorAll检索了一个数组，您必须选择第一个，看起来像这样：arrowLeft = document.querySelectorAll('#arrow-left')[0];。额外绑定onclick和addEventListener，则只需要一个。

http://jsfiddle.net/xmkdwyer/2/

Answer 2

您的let sliderImages = document.querySelectorAll('slide')找不到任何内容，因此您的脚本已损坏。我将该行更改为let sliderImages = document.getElementsByClassName('slide')，它成功找到了div。我认为您可能需要进行一些调整才能使其正常工作，但是图像确实会改变。

javascript轮播不滑动

2 个答案: