我對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><</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>></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>
我剝開它的一些,簡化了亂我以前有。這裏有一個小提琴:
任何幫助將不勝感激。我知道這很簡單,但我必須在這一點上走開,否則我會發瘋。
編輯:我能得到它的工作。我調整了上面的代碼,但我不確定將縮略圖與下一個/ prev事件綁定的最佳方式。當您單擊下一個/ prev按鈕時,您會看到「當前」類不再添加到縮略圖中。我知道應該有一個簡單的方法來做到這一點,但我一直無法弄清楚。
我清理JS有點刪除所有我嘗試的東西。有什麼想法嗎?
編輯2:我想通了。我只是在想錯誤的方式。無論如何,我仍然相信寫一個更好,更簡潔的方法。我更新了小提琴。
謝謝您的回答!我現在看到了更好的情況。我會回過頭來看看是否可以通過點擊上一頁/下一頁來獲取下面的內容以便更新。這仍然是我無法弄清楚的問題的另一部分。 – cbaone
我剛剛使用更新的代碼編輯了我的帖子,但似乎無法弄清楚如何使用next/prev按鈕將「當前」類添加到縮略圖。 – cbaone