javascript - javascript轮播不滑动

Question

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

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();

标签： javascriptcsshtml

Answer 1

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

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