【发布时间】：2013-09-26 20:54:46
【问题描述】：
我有一个旋转木马，下面有小缩略图。我正在添加一个 .isActive 类来显示位于每个缩略图上的隐藏
。当轮播第一次滑动时，我可以从第一个缩略图
中删除 .isActive 类。但我无法将 .isActive 添加到下一个
如何将所选的缩略图与相应的幻灯片相匹配？
这是一个小提琴：http://jsfiddle.net/gybYP/
这是我的 HTML：
<div class="js-carousel">
<div class="slidesContainer">
<ul class="clearfix">
<li class="slide green">One</li>
<li class="slide blue">Two</li>
<li class="slide red">Three</li>
</ul>
</div>
<!-- /slidesContainer -->
<div class="thumbnailContainer">
<ul>
<li class="thumb green">
<div>
<a href="#">
<div class="smallSlide"></div>
<div class="thumbOverlay isActive"></div>
</a>
</div>
</li>
<li class="thumb blue">
<div>
<a href="#">
<div class="smallSlide"></div>
<div class="thumbOverlay"></div>
</a>
</div>
</li>
<li class="thumb red">
<div>
<a href="#">
<div class="smallSlide"></div>
<div class="thumbOverlay"></div>
</a>
</div>
</li>
</ul>
</div>
<!-- /thumbnailContainer -->
</div>
<!-- /js-carousel -->
这是我的 CSS：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.slidesContainer {
width:200px;
height: 200px;
overflow: hidden;
margin-bottom: 10px;
}
.slidesContainer ul {
margin: 0;
padding: 0;
width: 600px; /* Slides width times total slides */
position: relative;
top: 0;
left: 0;
list-style:none;
}
.slide {
width: 200px;
height: 200px;
float: left;
}
.green {background-color: green;}
.blue {background-color: blue;}
.red {background-color: red;}
.thumbnailContainer ul {
margin: 0;
padding: 0;
width: 600px; /* Slides width times total slides */
position: relative;
top: 0;
left: 0;
list-style:none;
}
.thumb {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
}
.thumbOverlay {
background-color: gray;
width: 20px;
height: 20px;
position: absolute;
top: 30%;
left: 30%;
display: none;
}
.thumbOverlay.isActive {
display: block;
}
这是我的 JavaScript：
var slide_width = $('.slidesContainer li').outerWidth();
var left_value = slide_width * (-1);
$(document).ready(function() {
var speed = 3000;
var run = setInterval('rotate()', speed);
$('.slide:first').before($('.slide:last'));
//set the default item to the correct position
$('.slidesContainer ul').css({'left' : left_value});
$('.slidesContainer').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('rotate()', speed);
}
);
});
function rotate() {
//get the right position
var left_indent = parseInt($('.slidesContainer ul').css('left')) - slide_width;
$('.slidesContainer ul').animate(
{
'left' : left_indent
},
200,
function() {
//Remove the class .isActive from the current active thumbnail
$('.thumbnailContainer .thumbOverlay.isActive').removeClass('isActive');
//move the first item and put it as last item
$('.slidesContainer li:last').after($('.slidesContainer li:first'));
//set the default item to correct position
$('.slidesContainer ul').css({'left' : left_value});
}
);
}
【问题讨论】：
标签： javascript jquery