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

我对jQuery和JS一般都很陌生。我有一张我曾经工作过的缩略图幻灯片，但后来我添加了前一个/下一个按钮，现在它根本不起作用。我只需要帮助解决这个问题。在过去的两个小时里，我的头撞在墙上。这是一个幻灯片，图片上方有缩略图和内容。我只想在显示缩略图上的活动状态的同时切换上方的图片和下方的内容。它一直运行，直到你使用next/prev按钮。上一个/下一个按钮的双幻灯片

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

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

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

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

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

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

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

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

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

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

 
\t }); 
 

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

.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"> 
 
\t \t \t <ul class="hero cf"> 
 
\t \t \t \t <li class="hero-image one active content1"> 
 
\t \t \t \t \t 
 
\t \t \t \t </li> 
 

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

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

 

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

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

我剥开它的一些，简化了乱我以前有。这里有一个小提琴：

JSFiddle

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

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

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

编辑2：我想通了。我只是在想错误的方式。无论如何，我仍然相信写一个更好，更简洁的方法。我更新了小提琴。

来源

2016-02-23 cbaone

有在代码中的两个问题。

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

查核在CODEPEN

来源

2016-02-23 03:06:08

谢谢您的回答！我现在看到了更好的情况。我会回过头来看看是否可以通过点击上一页/下一页来获取下面的内容以便更新。这仍然是我无法弄清楚的问题的另一部分。 – cbaone

我刚刚使用更新的代码编辑了我的帖子，但似乎无法弄清楚如何使用next/prev按钮将“当前”类添加到缩略图。 – cbaone

就像我上面我提到的编辑工作的例子......我敢肯定有一个更好的方法来做到这一点。我只是为拇指创建了一个变量，并按照相同的约定来处理这些内容。 @零点，感谢让我走上正轨。

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

来源

2016-02-24 15:27:11 cbaone

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

回答

相关问题