如何构建jQuery旋转画廊来回前进？

Question

所以我在Jquery中有这个图库，它使我可以看到图像，但只能向前看。我需要的是，当用户单击图像的右侧时，它将移动到下一个图像，但是当用户单击图像的左侧时，它将移动到上一个图像。

到目前为止，这是我的代码：

2.24

任何解决方案将不胜感激！

Answer 1

为此，我建议您将DOM修改为具有两个控件，一个用于后退，另一个用于前移。可以使用CSS将图片定位在图片上方，这样可以允许点击图片left的一侧反向，而点击图片right的一侧。

	var counterOne = 0,
			galleryOne = ["https://images.pexels.com/photos/991422/pexels-photo-991422.jpeg", "https://images.pexels.com/photos/1054198/pexels-photo-1054198.jpeg", "https://images.pexels.com/photos/1054219/pexels-photo-1054219.jpeg", "https://images.pexels.com/photos/1054201/pexels-photo-1054201.jpeg"],
			rotateGalleryOne = function(dir) {
				if(dir == 'back'){
					counterOne--;
					if (counterOne < 0) {
						counterOne = galleryOne.length-1;
					}
				} else {
					counterOne++;
					if (counterOne >= galleryOne.length) {
						counterOne = 0;
					}
				}
				document.getElementById("ImgGallery1").src = galleryOne[counterOne];
		};

	img {
		max-width: 300px;
		height: auto;
		margin: 0 auto;
	}
	.close1 {
		text-align: center;
		position: relative;
		width: 100%;
		height: auto;
	}
	.gallery-box {
		position: relative;
		width: 500px;
		height: 300px;
		border: 1px solid #222;
	}
	.gallery-nav {
		position: absolute;
		height: 100%;
		width: 50px;
		top: 0;
	}
	.gallery-nav.nav-left {
		left: 0;
	}
	.gallery-nav.nav-right {
		right: 0;
	}
	.gallery-nav span {
		position: absolute;
		top: 50%;
		left: 20px;
		transform: translateY(-50%);
	}

<div class="close1">
	<div class="gallery-box">
		<div class="gallery-nav nav-left" onclick="rotateGalleryOne('back')">
			<span><</span>
		</div>
		<img src="https://images.pexels.com/photos/991422/pexels-photo-991422.jpeg" id="ImgGallery1">
		<div class="gallery-nav nav-right" onclick="rotateGalleryOne('forward')">
			<span>></span>
		</div>
		<div id="description1">
			<p>Millions is a collaboration with photographer Gustavo Nina. It focuses on a group of people in a music festival.
			<br>
			<br>
			2018
			</p>
		</div>
	</div>
</div>