如何在jQuery幻燈片代碼中添加prev和下一個按鈕

Question

我在下面的幻燈片中顯示了jQuery代碼。它適用於我現在正在開展的項目。雖然，如果可能的話，我想在相同的代碼中實現上一個和下一個按鈕。任何幫助將非常感激。

<script type="text/javascript"> 
function() { 
    $(".slider #1").show("fade",500); 
    $(".slider #1").delay(5500).hide("slide",{direction:"left"},500); 
    var sc = $(".slider img").size(); 
    var count = 2; 
    setInterval(function(){ 
    $(".slider #"+count).show("slide",{direction:"right"},500); 
    $(".slider #"+count).delay(5500).hide("slide",{direction:"left"},500); 
     if(count == sc){ 
    count = 1; 
    } 
    else 
    { 
    count=count+1; 
    } 
    },6500); 
    } 
</script> 

<div class="slider"> 
    <img id="1" src="images/slider/slide1.jpg" border="0" alt="primeira" /> 
    <img id="2" src="images/slider/slide2.jpg" border="0" alt="segunda" /> 
    <img id="3" src="images/slider/slide3.jpg" border="0" alt="terceira" /> 
</div> 

<style> 
.slider { 
    width: 800px; 
    height: 349px; 
    overflow:hidden; 
    margin: 30px auto; 
    background-image: url(images/slider/load.GIF); 
    background-repeat: no-repeat; 
    background-position: center; 
} 
.slider img { 
    width: 800px; 
    height: 349px; 
    display: none; 
} 
</stile> 

Answer 1

你可以做到以下幾點：

var sc; 
var count = 1; 

$(document).ready(function() { 
    sc = $(".slider img").size(); 
    $(".slider #1").show("fade",500); 
    setInterval(function(){ 
    switchPanel(1); 
    },5500); 
    $("#prev").click(function(){switchPanel(-1)}); 
    $("#next").click(function(){switchPanel(1)}); 
}); 
function switchPanel(direction) 
{ 
    var hide, show; 
    if (direction == 1) 
    { 
    show = "right"; 
    hide = "left"; 
    } 
    else if (direction == -1) 
    { 
    show = "left"; 
    hide = "right"; 
    } 
    $(".slider #"+count).hide("slide",{direction:hide},500); 
    count = count + direction; 
    if(count == sc + 1) count = 1; 
    else if(count == 0) count = sc; 
    $(".slider #"+count).show("slide",{direction:show},500); 
} 

什麼留給你是添加先前（#prev）和未來（#next）按鈕。

Answer 2

這應該是有效的。

$(".slider #1").show("fade",500); 
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500); 

var sc = $(".slider img").size(); 
var count = 2; 
var hideImage; 
var slideshow; 

var slideImage = function(isNext) { 
    var showDirection; 

    if (isNext){ 
     showDirection = "right"; 
    } else {  
     showDirection = "left"; 
    } 

    $(".slider #"+count).show("slide",{direction:showDirection},500); 
    hideImage = setTimeout(function(){ 
     $(".slider #"+count).hide("slide",{direction:"left"},500); 

     count = (count+1) > sc ? 1 : count+1; 
    }, 5500); 
} 

// Start the slideshow 
slideshow = setInterval(function(){ 
    slideImage(true); 
},6500); 

var manualSlide = function(isNext) { 
    // Stop the slideshow  
    clearTimeout(hideImage); 
    clearInterval(slideshow); 

    // Force hide current image 
    var hideDirection = isNext ? "left" : "right"; 
    $(".slider #"+count).hide("slide",{direction:hideDirection},500); 

    if(isNext) { 
     count = (count+1) > sc ? 1 : count+1; 
    } else { 
     count = (count-1) == 0 ? sc : count-1; 
    } 

    setTimeout(function(){ 
     slideImage(isNext); 

     // Start the slideshow again 
     slideshow = setInterval(function(){ 
      slideImage(true); 
     },6500); 
    }, 1000); 
} 

$("#prev").on("click", function() { manualSlide(false); }); 
$("#next").on("click", function() { manualSlide(true); }); 

這是結果：FIDDLE

注：我必須要改變delay爲setTimeout，因爲我們無法取消delay。