javascript - 单击两者时，下一个和上一个按钮不起作用

Question

我正在尝试使用 jquery.currentBanner 值增加和减少的横幅 slider ，当我单击按钮但横幅没有改变时。

脚本:

$(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; }​