Next和Prev按鈕在單擊時都不起作用

Question

我試圖使用jquery.currentBanner值增加和減少的橫幅滑塊，當我單擊按鈕但橫幅未更改時。

SCRIPT：

$(document).ready(function() { 
    var currentBanner = 0; 
    $("#prev").bind("click", function() { 
     currentBanner -= 1; 
     $("#banner_div img").eq(currentBanner).fadeIn("slow"); 
    }); 

    $("#next").bind("click",function() { 
     currentBanner += 1; 
     $("#banner_div img").eq(currentBanner).fadeIn("slow"); 
    }); 

    $("#banner_div img").eq(currentBanner).css("display", "block"); 
}); 

HTML：

<a href="#" id="next>next</a> 
<a href="#" id="prev">prev</a> 
<div id="banner_div"> 
    <img src="image1.jpg" alt="" /> 
    <img src="image2.jpg" alt="" /> 
    <img src="image3.jpg" alt="" /> 
    <img src="image4.jpg" alt="" /> 
</div> 

Answer 1

馬上蝙蝠

<a href="#" id="next>next</a> 

缺少收盤報價爲您的id屬性：

<a href="#" id="next">next</a> 

---

Here's a jsFiddle demo of what I would do。

jQuery的：

$(document).ready(function() { 

    var $images = $("#banner_div img"), 
     totalImages = $images.length, 
     currentIndex = 0; 

    $images.eq(currentIndex).fadeIn("slow"); 

    $("#prev").on("click", function() { 
     if (currentIndex > 0) { 
      $images.eq(currentIndex).stop(true,true).hide(0); 
      currentIndex -= 1; 
      $images.eq(currentIndex).stop(true,true).fadeIn("slow"); 
     } 
    }); 

    $("#next").on("click",function() { 
     if (currentIndex < totalImages-1) { 
      $images.eq(currentIndex).stop(true,true).hide(0); 
      currentIndex += 1; 
      $images.eq(currentIndex).stop(true,true).fadeIn("slow"); 
     } 
    }); 

});​ 

CSS：

#banner_div img { display: none; }​ 

Answer 2

使用梅索德$（選擇）.show（ 「變臉」）和$（選擇）.hide（」褪色「）

$(document).ready(function() { 
    var currentBanner = 0; 
    $("#banner_div img").hide(); 
    $("#banner_div img").eq(currentBanner).show("fade"); 

    $("#prev").bind("click", function() { 
     $("#banner_div img").eq(currentBanner).hide("fade"); 
     decrease(currentBanner); 
     $("#banner_div img").eq(currentBanner).show("fade"); 
    }); 

    $("#next").bind("click",function() { 
     $("#banner_div img").eq(currentBanner).hide("fade"); 
     increase(currentBanner); 
     $("#banner_div img").eq(currentBanner).show("fade"); 
    }); 

});  

當增加和減少檢查currentBanner之間0和橫幅計數。

function increase(n){ 
    n++; 
    if(n >= $("#banner_div img").length) 
     n=0; 
} 
function decrease(n){ 
    n; 
    if(n < 0) 
     n=$("#banner_div img").length -1; 
} 

Answer 3

緊湊型的莫爾塔扎代碼：

$(document).ready(function() { 
    var currentBanner = 0; 
    $("#banner_div img").eq(currentBanner).show("fade"); 

    $("#prev").bind("click", function() { 
     $("#banner_div img").eq(currentBanner--).hide("fade").prev().show("fade"); 
    }); 

    $("#next").bind("click",function() { 
     $("#banner_div img").eq(currentBanner++).hide("fade").next().show("fade"); 
    }); 
});