javascript - 我怎样才能在一页上有这个 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 定义当前主元素，并在主元素中使用 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();
    });

});