Создание цитатного ролика с кнопками и таймером

0

Мы пытаемся сделать каток с кнопками и таймером. Мы получили довольно далеко, но в этот момент кнопки не будут работать правильно здесь 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;
};
  • 0
    Вы можете упростить свой код, так как вы уже используете jQuery. Смотрите мою обновленную демонстрацию jsfiddle.net/Godinall/BaXXg/8 Последние 30 строк кода могут быть написаны в 3 строки в jQuery.
Теги:
slider
quotes

2 ответа

0
Лучший ответ

Я думаю, вы должны поставить назначение на i перед вызовом html(quotes[i]). Например:

b1.onclick = function() {
    i = 0;
    $("#slideContainer").html(quotes[i]);
};
  • 0
    Большое спасибо!
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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню