Javascript 制作带有按钮和计时器的报价辊

我们正在尝试制作一个带有按钮和计时器的报价辊。我们已经走了相当远的路，但在这一点上，按钮无法正常工作。下面是一个JSFIDLE：

这是密码

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;
};

var引号=[
“Quote1

-Repomeri”，
“引用2

-Emmi”，
“Quote3

-Taateli”，
“Quote4

-Joonas”，
“引用5

-Eskelinen”，
];
var i=0；
var定时器=null；
setInterval（函数（）{
$（“#slideContainer”）.html（引号[i]）；
if（i==quotes.length）{
i=0；
}否则{
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=函数（）{
$（“#slideContainer”）.html（引号[i]）；
i=0；
};
b2.onclick=函数（）{
$（“#slideContainer”）.html（引号[i]）；
i=1；
};
b3.onclick=函数（）{
$（“#slideContainer”）.html（引号[i]）；
i=2；
};
b4.onclick=函数（）{
$（“#slideContainer”）.html（引号[i]）；
i=3；
};
b5.onclick=函数（）{
$（“#slideContainer”）.html（引号[i]）；
i=4；
};

我想在调用

html（引号[I]）

之前，您必须将作业放到

I

。例如：

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

---

必须在

$（“#slideContainer”）.html（引号[i]）之前设置变量
i

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

HTML:

您可以简化代码，因为您已经在使用jQuery。看我更新的演示，最后30行代码实际上可以在jQuery中用3行代码编写。
<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">

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