![](/img/trans.png)
[英]jQuery Carousel. How to automatically show the Next Element after x seconds
[英]jQuery Carousel. How to show the Next or Previous Element only
我有一个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()的所有下一个元素和相同的元素。 任何快速解决方法..
有人可以帮我这个,
谢谢
您可以尝试使用.eq(0)
来选择.prev()和.next()为您提供的集合中的第一个元素。
请注意.next()
和.prev()
与大多数jQuery方法一样,都在集合上运行。 因此,如果你的选择器'.showarea'
正在选择多个元素,那么.next()
将为'.showarea'
选择的每个元素选择下一个兄弟元素,对于.prev()
。
if ($(this).attr('href') == '#carouselNext') {
$('.showarea').hide();
var el = $('.showarea').next('.showarea').eq(0);
if (el.length) {
el.fadeIn(500);
}
}
if ($(this).attr('href') == '#carouselPrev') {
$('.showarea').hide();
var el = $('.showarea').prev('.showarea').eq(0);
if (el.length) {
el.fadeIn(500);
}
}
下面将旋转所以,如果你在第一个项目按下将显示最后一项...
在这里演示
$('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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.