javascript - 如何让这个 jquery 图像滑块正常工作？

Question

我刚刚注意到，当我在图像滑块上单击左或右时，它会触发相同的动作，因此左和右是没有意义的！

你会注意到 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

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