javascript 轮播不滑动

Question

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

JsFiddle work

	
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];。另外你绑定(bind)onclick和addEventListener，只有一个是必要的。

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