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

如何使此jquery图像滑块正常工作？

1 个答案: