0

画像スライダーを左または右にクリックすると、同じアクションがトリガーされるため、左と右は無意味であることに気付きました!

next() と previous() がまったく同じであることに気付くでしょう。

このコードはサード パーティのものであり、修正方法がよくわかりません。助言がありますか？

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

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

    /* Functions */
    function next () {
        $slides.children(':last').fadeOut(500, function () {
            $(this).prependTo($slides).fadeIn(1);
        });
    }
    function previous () {
        $slides.children(':last').fadeOut(500, function () {
            $(this).prependTo($slides).fadeIn(1);
        });
    }

    /* Initialize */


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

});

これはイメージコードです:

   <section class="image_slider grid_4">
    <nav class="slider_nav"> <a href="#" class="left">&nbsp;</a> <a href="#" class="right">&nbsp;</a> <p class="message_overlay">Click images to enlarge</p> 
    </nav>
    <div class="slides">
        <a href="0003.jpg" rel="fancybox_club_corner" title=""><img src="0003.jpg" alt="" /></a>
        <a href="0002.jpg" rel="fancybox_club_corner" title=""><img src="0002.jpg" alt="" /></a>
        <a href="0001.jpg" rel="fancybox_club_corner" title=""><img src="0001.jpg" alt="" /></a>
    </div>
  </section>

これが実際の動作です: http://dev.enterf1.com/test.php

4

1 に答える 1

1

デバッグ後、これが解決策だと思います。次の関数と前の関数のコードを次のように変更します。

function next () {
    $slides.children(':last').fadeOut(500, function () {
        $slides.children(':last').remove().prependTo($slides).fadeIn(1);
        });
}
function previous () {
    $slides.children(':first').fadeOut(500, function () {
        $slides.children(':first').remove().appendTo($slides).fadeIn(1);                
    });
}
于 2013-05-22T14:30:37.353 に答える