带有上一个/下一个按钮的双幻灯片答案

【问题标题】：Double slideshow with previous/next buttons带有上一个/下一个按钮的双幻灯片
【发布时间】：2016-02-23 02:02:33
【问题描述】：

我对 jQuery 和一般的 JS 还很陌生。我有一个带有缩略图的幻灯片，但我添加了上一个/下一个按钮，现在它根本不起作用。我只需要帮助解决这个问题。在过去的两个小时里，我一直把头撞在墙上。这是一个幻灯片，缩略图上方的图像和下方的内容。我只想在缩略图上显示活动状态时能够同时切换上方的图像和下方的内容。它一直有效，直到您使用下一个/上一个按钮。

	$('.filmstrip div span').on('click', function(){
		var guts_id = $(this).attr('data-tab');
		$('.filmstrip div span').removeClass('current').addClass('gs');
		$(this).toggleClass('current gs');
		$('.guts, .hero-image').removeClass('active');
		$('.'+guts_id).addClass('active');
	});

	// var guts_id = $('.filmstrip div span').attr('data-tab');

	var fSlide = $('li:first', 'ul');
	var	lSlide = $('li:last', 'ul');

	var fGuts = $('section:first', '.guts-wrapper');
	var	lGuts = $('section:last', '.guts-wrapper');

	var fThumb = $('.thumb:first', '.filmstrip');
	var	lThumb = $('.thumb:last', '.filmstrip');

	var $nextSlide = $('.hero .active').next('li').length ? $('.hero .active').next('li') : fSlide;
	var $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;

	var $nextGuts = $('.guts-wrapper .active').next('section').length ? $('.guts-wrapper .active').next('section') : fGuts;
	var $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;

	var $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
	var $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;

	// var $nextThumb = $('.filmstrip .thumb .current').next('.thumb').length ? $('.filmstrip .thumb .current').next('.thumb') : fThumb;
	// var $prevThumb = $('.filmstrip .thumb .current').prev('.thumb').length ? $('.filmstrip .thumb .current').prev('.thumb') : lThumb;
	// var	$currentThumb = $('.filmstrip .current');

	$('.next').on('click', function(){
		$('.hero .active').removeClass('active');
		$('.guts-wrapper .active').removeClass('active');
		$('.filmstrip .alive').removeClass('alive').find('.thumb > .current').removeClass('current').addClass('gs');
		$nextSlide.addClass('active');
		$nextGuts.addClass('active');
		$nextThumb.addClass('alive').find('span').addClass('current').removeClass('gs');
		$nextSlide = $('.hero .active').next('li').length ? $('.hero .active').next('li') : fSlide;
		$prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;
		$nextGuts = $('.guts-wrapper .active').next('section').length ? $('.guts-wrapper .active').next('section') : fGuts;
		$prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;
		$nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
		$prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;

	});

	$('.previous').on('click', function(){
		$('.hero .active').removeClass('active');
		$('.guts-wrapper .active').removeClass('active');
		$('.filmstrip .alive').removeClass('alive').find('.thumb > .current').removeClass('current').addClass('gs');
		$prevSlide.addClass('active');
		$prevGuts.addClass('active');
		$prevThumb.addClass('alive').find('span').addClass('current').removeClass('gs');
		$prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : fSlide;
		$prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;
		$prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : fGuts;
		$prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;
		$nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
		$prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;
	});

.container {
  width: 800px;
  position: relative;
}
.hero {
  width: 800px;
  height: 275px;
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.hero-image {
  width: 100%;
  height: 100%;
  background: rebeccapurple;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 2;
}

.hero-image.content1 {
  background: orange;
  height: 275px;
}
.hero-image.content2 {
  background: rebeccapurple;
  height: 275px;
}
.hero-image.content3 {
  background: lightgreen;
  height: 275px;
}
.guts.content1 {
  background: red;
  height: 275px;
}
.guts.content2 {
  background: blue;
  height: 275px;
}
.guts.content3 {
  background: green;
  height: 275px;
}

.hero-image.active {
  opacity: 1;
  z-index: 3;
}

.filmstrip {
  padding: 0;
  height: 10rem;
  background: black;
  position: relative;
  width: 100%;
}
.filmstrip .button {
  *zoom: 1;
  float: left;
  clear: none;
  padding-left: 0;
  padding-right: 0;
  text-align: inherit;
  width: 22.5%;
  margin-left: 0%;
  margin-right: 0%;
  height: 10rem;
  position: relative;
  overflow: hidden;
  color: white;
}
.filmstrip .button:before,
.filmstrip .button:after {
  content: '';
  display: table;
}
.filmstrip .button:after {
  clear: both;
}
.filmstrip .button.arrow {
  *zoom: 1;
  float: left;
  clear: none;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  width: 16.25%;
  margin-left: 0%;
  margin-right: 0%;
  font-size: 5rem;
  line-height: 10rem;
}
.filmstrip .button.arrow:before,
.filmstrip .button.arrow:after {
  content: '';
  display: table;
}
.filmstrip .button.arrow:after {
  clear: both;
}
.filmstrip .button.arrow span {
  position: relative;
  top: initial;
  left: initial;
  width: 100%;
  height: 100%;
  color: #fff;
  line-height: 10rem;
  display: block;
}
.filmstrip .button.arrow span i {
  display: block;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.filmstrip .button.arrow span i:before,
.filmstrip .button.arrow span i:after {
  content: "";
  display: block;
  position: absolute;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: #fff;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.filmstrip .button.arrow span i:before {
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.filmstrip .button.arrow span i:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.filmstrip .button.arrow span i.left,
.filmstrip .button.arrow span i.right {
  width: 2rem;
  height: 3rem;
}
.filmstrip .button.arrow span i.left:before,
.filmstrip .button.arrow span i.right:before,
.filmstrip .button.arrow span i.left:after,
.filmstrip .button.arrow span i.right:after {
  width: 3rem;
  height: 2px;
  top: 50%;
}
.filmstrip .button.arrow span i.left {
  right: 1.5rem;
}
.filmstrip .button.arrow span i.left:before,
.filmstrip .button.arrow span i.left:after {
  left: 0;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.filmstrip .button.arrow span i.right {
  left: 1.5rem;
}
.filmstrip .button.arrow span i.right:before,
.filmstrip .button.arrow span i.right:after {
  right: 0;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.filmstrip .button.arrow span:hover i:before {
  -webkit-transform: rotate(-70deg);
  -moz-transform: rotate(-70deg);
  -o-transform: rotate(-70deg);
  -ms-transform: rotate(-70deg);
  transform: rotate(-70deg);
}
.filmstrip .button.arrow span:hover i:after {
  -webkit-transform: rotate(70deg);
  -moz-transform: rotate(70deg);
  -o-transform: rotate(70deg);
  -ms-transform: rotate(70deg);
  transform: rotate(70deg);
}
.filmstrip .button span {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
.filmstrip .button span:after {
  content: '';
  background: rgba(255,255,255,0);
  -webkit-transition: 0.25s all ease;
  -moz-transition: 0.25s all ease;
  -o-transition: 0.25s all ease;
  -ms-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
.filmstrip .button span img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
  overflow-x: hidden;
}
.filmstrip .button span.gs img:last-child {
  display: none;
}
.filmstrip .button.next:hover span:after,
.filmstrip .button.previous:hover span:after {
  background: rgba(255,255,255,0);
}
.filmstrip .button:hover {
  cursor: pointer;
}
.filmstrip .button:hover span:after {
  background: rgba(255,255,255,0.25);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.guts-wrapper {
  position: relative;
  *zoom: 1;
}
.guts-wrapper:before,
.guts-wrapper:after {
  content: '';
  display: table;
}
.guts-wrapper:after {
  clear: both;
}
.guts-wrapper .guts {
  display: none;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}
.guts-wrapper .guts.active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
			<ul class="hero cf">
				<li class="hero-image one active content1">
					
				</li>

				<li class="hero-image two content2">
					
				</li>

				<li class="hero-image three content3">
					
				</li>
			</ul>


			<section class="filmstrip">
				<div class="button arrow previous">
					<span>&lt;</span>
				</div>
				<div class="button ">
					<span data-tab="content1"><img src="http://placehold.it/200x75" alt=""></span>
				</div>
				<div class="button ">
					<span data-tab="content2"><img src="http://placehold.it/200x75" alt=""></span>
				</div>
				<div class="button ">
					<span data-tab="content3"><img src="http://placehold.it/200x75" alt=""></span>
				</div>
				<div class="button arrow next">
					<span>&gt;</span>
				</div>
			</section>
	  

			<div class="guts-wrapper">
				<section class="guts content1 active">
					SLIDE #1 CONTENT GOES HERE
				</section>
				<section class="guts content2">
					SLIDE #2 CONTENT GOES HERE
				</section>
				<section class="guts content3">
					SLIDE #3 CONTENT GOES HERE
				</section>
			</div>
</div>

我去掉了一些，简化了我之前的混乱。这是一个小提琴：

JSFiddle

任何帮助将不胜感激。我知道这很简单，但此时我必须走开，否则我会发疯的。

编辑：我能够让它工作。我调整了上面的代码，但我不确定将缩略图与下一个/上一个事件联系起来的最佳方式。当您单击下一个/上一个按钮时，您会看到“当前”类不再添加到缩略图中。我知道应该有一个简单的方法来做到这一点，但我一直无法弄清楚。

我稍微清理了 JS 以删除我正在尝试的所有内容。有什么想法吗？

编辑 2： 我想通了。我只是想错了方向。无论如何，我仍然相信有更好、更简洁的方式来写这篇文章。我更新了小提琴。

【问题讨论】：

标签： jquery navigation slider next

【解决方案1】：

您的代码中有两个问题。

activeSlide 变量不适合您的需要，因为具有.active 类的元素会通过滑动到上一个或下一个 li 来更改。您所做的基本上是找到具有.active 类的元素，并通过您的代码永远指出它。在这种情况下，最好使用$(".active")，这样它会搜索 DOM 以找到具有 active 类的元素。更多阅读请参考HERE
您没有在按钮的点击事件中更新prevSlide 和nextSlide。当您移动到下一张或上一张幻灯片时，您需要设置新元素。您需要在两个点击事件中同时更新 prevSlide 和 nextSlide。

查看CODEPEN 中的工作示例

【讨论】：

感谢您的回答！我对现在发生的事情看得更清楚了。当您单击 prev/next 时，我会回来查看是否可以更新下面的内容。这仍然是我无法弄清楚的问题的另一部分。
我刚刚用更新的代码编辑了我的帖子，但似乎无法弄清楚如何使用下一个/上一个按钮将“当前”类添加到缩略图中。

【解决方案2】：

就像我在上面的编辑中提到的那样......我很肯定有更好的方法来做到这一点。我刚刚为拇指创建了一个变量，并为内容片段遵循了相同的约定。 @零分，感谢您让我走上正轨。

    var fSlide = $('li:first', 'ul');
var lSlide = $('li:last', 'ul');

var fGuts = $('section:first', '.guts-wrapper');
var lGuts = $('section:last', '.guts-wrapper');

var fThumb = $('.thumb:first', '.filmstrip');
var lThumb = $('.thumb:last', '.filmstrip');

var $nextSlide = $('.hero .active').next('li').length ? $('.hero .active').next('li') : fSlide;
var $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;

var $nextGuts = $('.guts-wrapper .active').next('section').length ? $('.guts-wrapper .active').next('section') : fGuts;
var $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;

var $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
var $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;

$('.next').on('click', function(){
    $('.hero .active').removeClass('active');
    $('.guts-wrapper .active').removeClass('active');
    $('.filmstrip .alive').removeClass('alive').find('.thumb > .current').removeClass('current').addClass('gs');
    $nextSlide.addClass('active');
    $nextGuts.addClass('active');
    $nextThumb.addClass('alive').find('span').addClass('current').removeClass('gs');
    $nextSlide = $('.hero .active').next('li').length ? $('.hero .active').next('li') : fSlide;
    $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;
    $nextGuts = $('.guts-wrapper .active').next('section').length ? $('.guts-wrapper .active').next('section') : fGuts;
    $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;
    $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
    $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;

});

$('.previous').on('click', function(){
    $('.hero .active').removeClass('active');
    $('.guts-wrapper .active').removeClass('active');
    $('.filmstrip .alive').removeClass('alive').find('.thumb > .current').removeClass('current').addClass('gs');
    $prevSlide.addClass('active');
    $prevGuts.addClass('active');
    $prevThumb.addClass('alive').find('span').addClass('current').removeClass('gs');
    $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : fSlide;
    $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;
    $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : fGuts;
    $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;
    $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
    $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;
});

【讨论】：