我怎麼能有這個jQuery的圖像幻燈片效果多個實例

Question

在一個頁面上現在我有這個我的網頁上：

<section class="image_slider grid_4"> 
<nav class="slider_nav"> <a href="#" class="left">&nbsp;</a> <a href="#" class="right">&nbsp;</a> </nav> 
<div class="slides"> 
    <a href="/images/placeholders/800x600/7.jpg" rel="fancybox_gallery1"><img src="/images/placeholders/300x200/7.jpg" alt="" /></a> 
    <a href="/images/placeholders/800x600/8.jpg" rel="fancybox_gallery1"><img src="/images/placeholders/300x200/8.jpg" alt="" /></a> 
</div> 

控制的JS是這樣的：

/* Sidebar image slider */ 
$('.image_slider').each(function() { 

    /* Functions */ 
    function resetInterval() { 
     clearInterval(imageSliderInterval); 
     imageSliderInterval = setInterval(next, 4000); 
    } 
    function next() { 
     $('.image_slider .slides').children(':last').fadeOut(1000, function() { 
      $(this).prependTo('.image_slider .slides').fadeIn(1); 
     }); 
    } 
    function previous() { 
     $('.image_slider .slides').children(':last').fadeOut(1000, function() { 
      $(this).prependTo('.image_slider .slides').fadeIn(1); 
     }); 
    } 

    /* Initialize */ 
    var imageSliderInterval; 
    resetInterval(); 

    /* Controls */ 
    $('.image_slider .left').click(function() { 
     next(); 
     resetInterval(); 
    }); 
    $('.image_slider .right').click(function() { 
     previous(); 
     resetInterval(); 
    }); 

}); 

任何想法，我可以有多個圖像幻燈片放映實例，每個圖像庫單獨控制？

原始代碼從這個模板來，如果你想看看在肉體 - 向下滾動到標題「南imperdiet lacinia」：

http://travel.equiet.sk/hotel.html

Answer 1

以下應隔離實例。這種情況的關鍵是在each循環內使用this定義當前主元素，並在主元素內使用find()將其他元素的搜索本地化爲僅當前實例。

/* Sidebar image slider */ 
$('.image_slider').each(function() { 

    var $slider=$(this), $slides= $slider.find('.slides'), imageSliderInterval; 

    /* Functions */ 
    function resetInterval() { 
     clearInterval(imageSliderInterval); 
     imageSliderInterval = setInterval(next, 4000); 
    } 
    function next() { 
     $slides.children(':last').fadeOut(1000, function() { 
      $(this).prependTo($slides).fadeIn(1); 
     }); 
    } 
    function previous() { 
     $slides.children(':last').fadeOut(1000, function() { 
      $(this).prependTo($slides).fadeIn(1); 
     }); 
    } 

    /* Initialize */ 

    resetInterval(); 

    /* Controls */ 
    $slider.find('.left').click(function() { 
     next(); 
     resetInterval(); 
    }); 
    $slider.find('.right').click(function() { 
     previous(); 
     resetInterval(); 
    }); 

});