製作帶按鈕和計時器的報價滾筒

我們正在嘗試使用按鈕和計時器製作報價滾筒。很遠，我們已經得到了，但是在這一點上的按鈕將無法正常工作這裏有一個的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; 
};

來源

2014-02-18 user3323489

因爲你使用jQuery，您可以簡化代碼已經。看到我更新的演示http://jsfiddle.net/Godinall/BaXXg/8/你最後30行代碼實際上可以寫成3行jQuery。 – Godinall

我認爲你必須把分配給i致電前html(quotes[i])。例如：

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

來源

2014-02-18 13:24:31 spassvogel

非常感謝！ – user3323489

你有$("#slideContainer").html(quotes[i]);之前設置變量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

來源

2014-02-18 13:27:00 MamaWalter

製作帶按鈕和計時器的報價滾筒

回答

相關問題