0

現在、私は自分のページにこれを持っています：

<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

4

1 に答える 1

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();
    });

});
于 2013-01-20T18:56:15.623 に答える