Question

我正在尝试使用自动循环消息的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>

Answer 1

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

如何创建按钮来启动和停止JQuery News Ticker

1 个答案: