![](/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.