如何让这个jQuery图像滑块正常工作？

我刚刚注意到，当我在图像滑块上点击左侧或右侧时，它会触发相同的动作，因此左右无意义！如何让这个jQuery图像滑块正常工作？

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

来源

2013-05-22 James Wilson

你能为我们提供一个小提琴吗？ – Gautam3164

你可以设置一个jsfiddle –

不是小提琴，而是上传的例子，请参阅原始问题。 –

调试后，我认为这是解决方案。根据此更改下一个和上一个功能的代码：

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-22 14:30:37

这适用于稍作修改。 previous（）需要fadeOut（1和fadeIn（500） - next（）的相反。谢谢man“ –

如何让这个jQuery图像滑块正常工作？

回答

相关问题