我有一个jQuery问题,我真的尝试了我所知道的一切(我是新手)所以..
简而言之,我正在做一个简单的旋转木马效果.我正在使用此代码.
(div .showarea是需要旋转的DIV(下一个/上一个),但我想一次只显示一个div.)
这是html标记.
<div class="maincarousel">
<div class="showarea"><a href="#"><img src="img/sampleshow.png" alt="" title="" /></a></div>
<div class="showarea"><a href="#"><img src="img/sampleshow2.png" alt="" title="" /></a></div>
<div class="showarea"><a href="#"><img src="img/sampleshow3.png" alt="" title="" /></a></div>
<a href="#carouselPrev" class="leftarrow" title="PrevIoUs"></a>
<a href="#carouselNext" class="rightarrow" title="Next"></a>
</div>
这是我的jquery尝试
$('.showarea').hide();
$('.showarea:first').fadeIn(500);
$('.maincarousel a').click(function () {
if ($(this).attr('href') == '#carouselNext') {
$('.showarea').hide();
$('.showarea').next('.showarea').fadeIn(500);
}
if ($(this).attr('href') == '#carouselPrev') {
$('.showarea').hide();
$('.showarea').prev('.showarea').fadeIn(500);
}
});
不幸的是,next()和prev()不会仅显示下一个元素,而是显示prev()的所有下一个元素和相同的元素.任何快速解决方法..
有人可以帮我这个,
谢谢
解决方法
下面将旋转所以,如果你在第一个项目按下将显示最后一项…
演示here
$('div.showarea').fadeOut(0);
$('div.showarea:first').fadeIn(500);
$('a.leftarrow,a.rightarrow').click( function (ev) {
//prevent browser jumping to top
ev.preventDefault();
//get current visible item
var $visibleItem = $('div.showarea:visible');
//get total item count
var total = $('div.showarea').length;
//get index of current visible item
var index = $visibleItem.prevAll().length;
//if we click next increment current index,else decrease index
$(this).attr('href') === '#carouselNext' ? index++ : index--;
//if we are now past the beginning or end show the last or first item
if (index === -1){
index = total-1;
}
if (index === total){
index = 0
}
//hide current show item
$visibleItem.hide();
//fade in the relevant item
$('div.showarea:eq(' + index + ')').fadeIn(500);
});
