JQuery слайдер изображений петля с setInterval

Question

У меня есть эта разметка:

<div id="imagedisplay"> 
    <div class="slider_item active"></div> 
    <div class="slider_item"></div> 
    <div class="slider_item"></div> 
    <div class="slider_item last"></div> 
</div> 

и этот сценарий

setInterval(function(){ 
    $('.slider_item.active').fadeOut().removeClass('active') 
     .next('.slider_item').fadeIn().addClass('active'); 
}, 5000); 

Как сделать эту петлю наилучшим образом? Сейчас последнее изображение просто исчезает, без повторного замирания первого изображения.

Answer 1

Проверьте nextItem есть элементы и если не установить его обратно к первому:

var nextItem = $('.slider_item.active') 
    .fadeOut() 
    .removeClass('active') 
    .next('.slider_item'); 

if (nextItem.length === 0) { 
    nextItem = $('.slider_item').first(); 
} 

nextItem.fadeIn().addClass('active'); 

Вот пример: jsFiddle

Answer 2

Я на самом деле просто написал плагин для этого, и это довольно читаемым, так что вы можете вероятно, понимаете, просто глядя на него.

Github репо - https://github.com/joshbedo/fullPageSlider/blob/master/fullpagesliderV2.js

Некоторые функции для стрелок все еще работал над более динамичным, но это работает вот пример, как хорошо. Я скользящий html, но вы можете легко добавить класс .slide-panel с изображениями внутри.

В действии http://strikingalchemy.publishpath.com/portfolio

EDIT: Они редактировал сценарий, так что не имеет setInterval цикл оригинал на GitHub имеет интервал цикла, когда пользователь нажимает на стрелку и заинтересован, чтобы увидеть больше. Легко сменяется, если вы хотите, чтобы он работал на загрузке. Я просто не хотел использовать дополнительные ресурсы, когда пользователь не интересовался. Позже я приведу пример на github позже после работы.

Answer 3

Демо: http://jsfiddle.net/gdS8Q/2/

var cur = 0; 
var count = $('.slider_item').length; 

$('.slider_item').hide(); 
$('.slider_item').eq(0).show(); 

setInterval(function() {  
    $('.slider_item').eq(cur).fadeOut(function() { 
     $(this).removeClass('active'); 
     cur = (cur + 1) % count; 
     $('.slider_item').eq(cur).addClass('active').fadeIn(); 
    }); 
}, 2000);​ 

Answer 4

Я знаю, натыкаясь старую нить, но может кто-то сказать мне правильный код, чтобы отобразить предыдущий DIV?

Это HTML

<div id="imagedisplay"> 
    <div class="slider_item active"></div> 
    <div class="slider_item"></div> 
    <div class="slider_item"></div> 
    <div class="slider_item last"></div> 
</div> 

и JQuery

 var nextItem = $('.slider_item.active') 
     .fadeOut() 
     .removeClass('active') 
     .next('.slider_item'); 

if (nextItem.length === 0) { 
     nextItem = $('.slider_item').first(); 
    } 
     nextItem.fadeIn().addClass('active'); 

Я видел jsfiddle связь и попытался различные комбинации, но не могу показаться, чтобы понять правильный код

Благодарности