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

以下应该隔离实例。这种情况的关键是使用this循环中的each定义当前主元素，并使用主元素中的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();
    });

});

如何在一个页面上拥有此jQuery图像幻灯片效果的多个实例

1 个答案: