javascript - 为图像 slider 优化/制作更好的 JQuery 代码

Question

我开发了这个基本的图像 slider 元素:

$(document).ready(function() {
  $('.lightbox').click(function() {
    $('.backdrop, .box').animate({
      'opacity': '.50'
    }, 300, 'linear');
    $('.box').animate({
      'opacity': '1.00'
    }, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
  });

  $('.close').click(function() {
    close_box();
  });

  $('.backdrop').click(function() {
    close_box();
  });

	//SlideShow
	$('.next').click(function(){
		clickNext();
	});
	$('.prev').click(function(){
		clickPrev();
	});

});

function close_box() {
  $('.backdrop, .box').animate({
    'opacity': '0'
  }, 300, 'linear', function() {
    $('.backdrop, .box').css('display', 'none');
  });
}

//PREVIOUS
function clickPrev() {
	$('.img_1').css('display', 'block');
	//Move to the prev Image
	$('.img_2').css('display', 'none');
}

//NEXT
function clickNext() {
	$('.img_1').css('display', 'none');
	//Move to the next Image
	$('.img_2').css('display', 'block');
}

body {
  font-family: Helvetica, Arial;
}

.backdrop {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .0;
  filter: alpha(opacity=0);
  z-index: 50;
  display: none;
}

.box {
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  left: 50%;
  background: white;
  text-align: left;
  z-index: 51;
  padding: 0;
	margin: 0;
  display: none;
	-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #444444;
  -webkit-box-shadow: 0px 0px 5px #444444;
  box-shadow: 0px 0px 5px #444444;
  border: 10px solid #fff;
	width: 40%;
}

@media (min-width: 320px) and (max-width: 900px) {
	.box {width: 98%;}
}

@media (min-width: 901px) and (max-width: 1200px) {
	.box {width: 60%;}
}

@media (min-width: 1201px) {
	.box {width: 48%;}
}

.box img {
	width: 100%;
}

.box img:nth-child(2) {
	display: none;
}

.caption {
	padding-top: 10px;
  font-size: 15px;
}

.prev, .next {
	float: right;
	padding: 5px;
	font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<h1>Welcome Within</h1>
	<a href="#" class="lightbox">Open Lightbox</a>
	<div class="backdrop"></div>
	<div class="box">
	  <img class="img_1" src="http://urbanphenomena.net/imgs/wesal/wesal1.jpg" />
		<img class="img_2" src="http://urbanphenomena.net/imgs/wesal/wesal2.jpg" />

	  <div class="caption">
		  <a href="#" class="next">NEXT</a>
			<a href="#" class="prev">PREVIOUS</a>
			<p>This thing is called 'Caption'. Let me tell you:</p>
      <hr />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	  </div>
</div>

看到我在那里做了什么吗？该类是 display:none; 并且当用户在 jquery 中单击 next 或 prev 时，它会将 css 更改为 display: block;

我想这是一个好的开始，但如果我要添加更多图片呢？如果我继续对每个 nth:child() 执行 display none 操作，那会很有趣，对吧？

我正在考虑将 click to change image 设为一个函数，但我不知道该怎么做，这样我就不必每次都添加 css 类了!

Answer 1

你可以让你的 jQuery 更通用:

var imgVisible = $('.box > img:visible');
//SlideShow
$('.next').click(function(){
    $(imgVisible ).css('display', 'none');
    $(imgVisible ).next().css('display', 'block');
});
$('.prev').click(function(){
    $(imgVisible ).css('display', 'none');
    $(imgVisible ).prev().css('display', 'block');
});