Question

我想通过使用按钮循环浏览一些背景，只是不太擅长js。我把它们命名为＆＃34; 1＆＃34; - ＆＃34; 13＆＃34;。我想逐步完成它们。当我到达＆＃34; 13＆＃34;我想让它重新回到＆＃34; 1＆＃34;当＆＃34; next＆＃34;点击，当＆＃34; prev＆＃34;点击进入＆＃34; 1＆＃34;将其设置为＆＃34; 13＆＃34;。这是我尝试过的，但我知道我的语法对于js是错误的。

HTML

<button id="n" class="b">NEXT</button>
<button id="p" class="b">PREV</button>

CSS

body {
    background:black;
}

.b {
    background:black;
    color:white;
}

JS

$(document).ready(function(){

var i = 1;

$("#n").click(function() {
    alert(i);
    i++;
    $('body').css("background-image",  "url(../images/bg/ " + i + " .png)");
       if (i===14){i=1;};
 });

$("#p").click(function() {
    alert(i);
    i--;
    $('body').css("background-image",  "url(../images/bg/ " + i + " .png)");
        if (i===0){i=13;};
});
});

仍在努力，但一些帮助将很快完成它。 http://jsfiddle.net/80nz56wy/如果我使用本地内容，我想jsfiddle不会有多大帮助。

Answer 1

将您的javascript编码更改为如下..

var i = 1;

    $("#n").click(function() {
        $('body').css("background-image", "bg" + i +".png");
    i=i+1;
    if (i==13){i=1};
    });


    $("#p").click(function() {
            $('body').css("background-image", "bg" + i +".png");
    i=i-1;
    if (i==1){i=13};
    });

Answer 2

你也应该试试这个。这里的条件是在设置CSS之前写入的，它首先检查然后分配图像路径。

$(document).ready(function() {
    var i = 0;

    $("#n").click(function() {
        i++;
        if (i > 13){ i = 1; };
        $('body').css('background-image',  'url(images/bg/' + i + '.png)');
       //if (i === 13){ i = 1; };
    });

    $("#p").click(function() {
        i--;
        if (i <= 0) { i = 13; };
        $('body').css('background-image',  'url(images/bg/' + i + '.png)');
        //if (i === 1) { i = 13; };
    });
});

另外，你可能会得到错误的图像路径，例如：

images/bg/0.png

或

images/bg/-1.png

Answer 3

在这里，不知道我改变了20次，我一遍又一遍地编辑了同一条线，但我必须早点完全延迟。

$(document).ready(function(){

var i = 0;

    $("#n").click(function() {
        i++;
        if ( i > 13 ){ i = 1; };
        $('body').css('background-image',  'url(images/bg/' + i + '.png)');   
    });

    $("#p").click(function() {
        i--;
        if ( i <= 0 ){ i = 13; };
        $('body').css('background-image',  'url(images/bg/' + i + '.png)');    
    });
});

如何通过单击按钮循环显示背景图像？

3 个答案: