2

我正在尝试使用 JQuery 制作一个自动循环消息的新闻自动收报机，但可以通过按钮停止和启动。到目前为止，我有<li>会循环和重复的消息。

我正在尝试使用以下代码来创建上面提到的按钮。按钮已创建，脚本功能对我来说很合适。

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>
4

1 回答 1

2

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-13T00:40:03.293 回答