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

Posted 2021-04-12

我想用按钮构建一个滑块，我不知道该怎么做。当我点击右键时，它会滑动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();
})

答案

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

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>

以上是关于在右侧滑动2张图像后，下一页为空白的主要内容，如果未能解决你的问题，请参考以下文章

jQuery轮播图练习

转到ViewPager中的下一页

笔记-移动端滑动到底部自动加载下一页内容

合并文档时让第一页为奇数

js实现分页

解决bootstrap在手机端滑动右侧出现空白的一个方法