Question

我对jQuery和JS一般都很新。我有一个幻灯片，上面有我工作的缩略图，但后来我添加了上一个/下一个按钮，现在根本不起作用。我只是需要帮助解决这个问题。在过去的两个小时里，我的头靠在墙上。这是一个幻灯片，上面有缩略图和内容下方的图像。我只是希望能够在缩略图上显示活动状态时切换上面的图像和下面的内容。它一直有效，直到你使用next / prev按钮。

.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>

>>> map(sum, zip(*mylist))
[1.5833844884488448, 1.779825058021818]

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

JSFiddle

非常感谢任何帮助。我知道这很简单，但我必须在这一点上走开，否则我会发疯。

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

我清理了JS，删除了我正在尝试的所有东西。有什么想法吗？

编辑2：我弄清楚了。我只是想错了路。无论如何，我仍然相信有更好，更简洁的方式来写这个。我更新了小提琴。

Answer 1

您的代码中存在两个问题。

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

查看CODEPEN

Answer 2

就像我在上面的编辑中提到的那样......我很积极，这是一个更好的方法。我刚刚为拇指创建了一个变量，并遵循相同的内容。 @zero点，感谢让我走上正轨。

    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;
});

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

2 个答案: