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 に答える