如何創建按鈕來啓動和停止JQuery新聞速遞

我正在嘗試使用JQuery自動循環消息，但可以停止並使用按鈕啓動的新聞自動收報器。到目前爲止，我有<li>消息將循環和重複。如何創建按鈕來啓動和停止JQuery新聞速遞

我想用下面的代碼來創建上面提到的按鈕。按鈕被創建，腳本功能看起來很適合我。

Is there something I'm missing below?

另外，是否有一個功能，我可以使頁面刷新本身？如果有人在頁面正在使用時操縱消息。如果我沒有照顧到這一點，那麼我真的很難被按下。

謝謝你提供的任何幫助。

<!doctype html> 

<head><meta charset="utf-8" /> 
<title>homework</title> 
<link href="resources/css/global.css" rel="stylesheet" type="text/css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 

</script> 

<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC' rel='stylesheet' type='text/css'> 

</head> 
<body> 

<div id="page"> 

<ul id="ticker_01" class="ticker"> 

<li>1st block</li> 
<li>2nd Block</li> 
<li>Should be nearly finished</li> 
<li>Finally done</li> 
</ul> 
</div> 
<input type="button" class="next" value="next" /> 
<input type="button" class="prev" value="prev" /> 
<script> 

function tick() 
{ 
$('#ticker_01 li:first').slideUp(function() { $(this).appendTo($('#ticker_01')).slideDown(); }); 
} 

setInterval(function(){ tick() }, 5000); 
(function(){ 
var $lis = $('ul li'); 
var index = 0, lastIndex = 0; 
start(); // activate first, add event listeners to buttons 
function next(){ 
lastIndex = index; 
if(++index == $lis.length) index = 0; // if next is out of bounds go to first 
    $lis.eq(index).addClass('active'); 
    $lis.eq(lastIndex).removeClass('active'); 
}; 

function prev(){ 
    lastIndex = index; 
    if(--index < 0) index = ($lis.length - 1); // if prev is less than first go to last 
    $lis.eq(index).addClass('active'); 
    $lis.eq(lastIndex).removeClass('active'); 
}; 
function start(){ 
    $lis.eq(0).addClass('active'); 
    $('.next').click(next); 
    $('.prev').click(prev); 
} 
})(); 
</script> 
</body> 
</html>

來源

2013-03-13 TheDungeonMaster

Is there a built-in button feature with JQuery？

幾乎沒有，但你的眼光來看待jQuery UI

Also, is there a feature that I can use to make the page refresh itself?

是當然的那AJAX

AJAX可以幫助你更新你想出來一個真正的原理確定刷新一下，只需更新你想要的東西

請參考 http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

http://api.jquery.com/jQuery.ajax/

http://www.w3schools.com/jquery/jquery_ajax_intro.asp

來源

2013-03-13 00:40:03

優秀的，偉大的聯繫！然而，我找到了一個JavaScript代碼，可以讓我指定頁面刷新的頻率。 setTimeout（function（）{window.location.reload（1）;}，20000）; – TheDungeonMaster 2013-03-13 02:08:28

對不起，我只是更新了一些代碼，想看看是否有任何想法使按鈕正常工作。 – TheDungeonMaster 2013-03-13 02:29:49

它是蝙蝠使用window.location.reload（）更新整個頁面AJ AJAX – 2013-03-13 05:00:57

如何創建按鈕來啓動和停止JQuery新聞速遞

回答

相關問題