Мы пытаемся сделать каток с кнопками и таймером. Мы получили довольно далеко, но в этот момент кнопки не будут работать правильно здесь 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;
};
Я думаю, вы должны поставить назначение на i
перед вызовом html(quotes[i])
. Например:
b1.onclick = function() {
i = 0;
$("#slideContainer").html(quotes[i]);
};
вам нужно установить переменную 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]);
});