Question

我开发了这个基本的图像滑块项目：

$(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中显示时，它会将css更改为display: block;

现在这是一个很好的开始我想，但如果我要添加更多图像怎么办？如果我继续对每个display none做nth:child()事，那会很有趣，对吧？

我正在考虑将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');
});

为图像滑块

1 个答案: