如何在一頁上具有此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();
    });

});

有什么想法可以使圖像幻燈片放映的多個實例在每個圖像庫上具有單獨的控件嗎？

如果您想看一看，原始代碼來自此模板-向下滾動至標題“ Nam imperdiet lacinia”：

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

Answer 1

以下應該隔離實例。 這種情況的關鍵是在each循環中使用this定義當前的主要元素，並在main元素中使用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();
    });

});