Question

我们正试图用按钮和计时器制作报价滚筒。我们已经走得很远了，但是此时按钮无法正常工作这里是一个jsfiddle：http://jsfiddle.net/BaXXg/1/

以下是代码

var quotes = [
    "Quote1<br><br>  -  Repomeri",
    "Quote2 <br><br> - Emmi",
    "Quote3<br><br> - Taateli",
    "Quote4<br><br> - Joonas",
    "Quote5<br><br> - Eskelinen",
];

var i = 0;
var timer = null;

setInterval(function() {
    $("#slideContainer").html(quotes[i]);
    if (i == quotes.length) {
        i = 0;
    } else {
        i++;
    }
}, 4 * 1000);


var b1 = document.getElementById('b1'),
    b2 = document.getElementById('b2'),
    b3 = document.getElementById('b3'),
    b4 = document.getElementById('b4'),
    b5 = document.getElementById('b5');


b1.onclick = function() {
    $("#slideContainer").html(quotes[i]);
    i = 0;
};

b2.onclick = function() {
    $("#slideContainer").html(quotes[i]);
    i = 1;
};

b3.onclick = function() {
    $("#slideContainer").html(quotes[i]);
    i = 2;
};

b4.onclick = function() {
    $("#slideContainer").html(quotes[i]);
    i = 3;
};

b5.onclick = function() {
    $("#slideContainer").html(quotes[i]);
    i = 4;
};

Answer 1

您必须在i之前设置变量$("#slideContainer").html(quotes[i]);。

您还可以使用class并减少代码：

HTML：

<input type="button" class="btn" value="" id="b1">
<input type="button" class="btn" value="" id="b2">
<input type="button" class="btn" value="" id="b3">
<input type="button" class="btn" value="" id="b4">
<input type="button" class="btn" value="" id="b5">

JS：

$('.btn').click(function () {
    i = $(this).attr('id').substr(1);
    i--;
    $("#slideContainer").html(quotes[i]);   
});

FIDDLE

Answer 2

我认为您必须在致电i之前将作业分配到html(quotes[i])。例如：

b1.onclick = function() {
    i = 0;
    $("#slideContainer").html(quotes[i]);
};

用按钮和计时器制作报价辊

2 个答案: