如何讓這個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);     
    }); 
}