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

【问题标题】：Next and Prev button not work when click both单击两者时，下一个和上一个按钮不起作用
【发布时间】：2012-05-09 15:12:31
【问题描述】：

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

脚本：

$(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>

【问题讨论】：

如果以下任何答案对您有所帮助，请不要忘记将其中一个标记为未来访问者的答案。

标签： javascript jquery html banner

【解决方案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; }

【讨论】：

这是个问题，但还有一个更大的问题 - 当前显示的图像永远不会隐藏...
@ParthThakkar - 我只是为乍一看的语法错误提供即时答案，同时我正在为任何其他潜在错误创建一个 jsFiddle 演示。如果您能重估我的帖子，我将不胜感激。 =D

【解决方案2】：

Morteza 代码的精简版：

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

【讨论】：

【解决方案3】：

使用方法 $(selector).show("fade") 和 $(selector).hide("fade")

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

【讨论】：