在右侧滑动 2 张图像后，下一页为空白

Question

我想构建一个带有按钮的滑块，但我不知道该怎么做。当我点击右键时，它会滑动 2 页然后显示空白，并认为问题出在 arrowRight 功能上。 如果有人知道为什么我的代码不起作用，请向我解释。

//FOR SLIDER    

let sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    current = 0;
function reset() {
    for (let i = 0; i < sliderImages.length; i++) {
        sliderImages[i].style.display = 'none';
    }
}
function startSlide() {
    reset();
    sliderImages[0].style.display = 'block';
}
startSlide();
function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = 'block';
    current--
}
arrowLeft.addEventListener('click', function () {
    if (current === 0) {
        current = sliderImages.length;
    }
    slideLeft();
})
function slideRight() {
    reset();
    sliderImages[current + 1].style.display = 'block';
    current++
}
arrowRight.addEventListener('click', function () {
    if (current === sliderImages.length) {
        current = 0;
    }
    slideRight();
})

Answer 1

我认为你的方法不适合这项任务。通常它是两个容器 - 一个用于可见部分，另一个充满图像。它看起来像这样：

const sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    container = document.querySelector(".container");
document.addEventListener("DOMContentLoaded", function() {
	container.style.width = 100 * sliderImages.length + "%";
	sliderImages.forEach((el) => {
		el.style.width = 100 / sliderImages.length + "%";
	})
	startSlider()
});	
function startSlider() {
	let pos = 0;
	arrowLeft.addEventListener("click", slideLeft)
	arrowRight.addEventListener("click", slideRight)
	function slideLeft() {
		if(pos === 0) {
			pos = sliderImages.length - 1;
		} else{
			pos--;
		}
		slide()
	}
	function slideRight() {
		if(pos === sliderImages.length - 1) {
			pos = 0;
		} else {
			pos++;
		}
		slide()
	}
	function slide() {
		$(container).animate({left: -100 * pos + "%"}, 500)
	}
}

*{
		padding: 0;
		margin: 0;
	}
	body{
		width: 100%;
	}
	.outer-container {
		width: 80%;
		margin: 5px auto;
		overflow: hidden;
		position: relative;
	}
	.slide > img {
		width: 100%;
	}
	
	.container {
		display: flex;
		position: relative;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-container">
 <div id="arrow-left">LEFT</div>
 <div id="arrow-right">RIGHT</div>
 <div class="container">
  <div class="slide">
  	<img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
  </div>
  <div class="slide">
  	<img src="https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg">
  </div>
  <div class="slide">
  	<img src="https://media.boingboing.net/wp-content/uploads/2019/02/cats.jpg">
  </div>
  <div class="slide">
  	<img src="https://cdn-images-1.medium.com/max/1600/1*mONNI1lG9VuiqovpnYqicA.jpeg">
  </div>
 </div>
</div>

如果您只是对代码进行修复，那么我更改了以下内容：

arrowRight.addEventListener('click', function () {
    //Make sure that's current less than the number of images
    if (current + 1 == sliderImages.length) {
        current = 0;
    } else {
        current++;
    }
    slide();
})
//Moved checks and current position management from slide
//Functions to click listeners
arrowLeft.addEventListener('click', function () {
    if (current === 0) {
        current = sliderImages.length - 1;
    } else {
        current--;
    }
    slide();
})
//That let me merge your two function into one
//And your checks for positions was a little off
function slide(){
    reset();
    sliderImages[current].style.display = 'block';
}

我希望我的回答对你有所帮助。如果您对此代码有任何疑问，请在下面添加注释。