JQueryでシームレススクロールニュースを作成する手順を詳しく解説

この記事では主にJQueryをベースにシームレススクロールニュースを作成する方法を紹介します。参考のために皆さんと共有してください。詳細は次のとおりです:

まず第一に、ここには、以下に示すように非常に簡潔な HTML コードがあります:

<ul>
<li>你说我是好人吗，我是好人啊</li>
<li>哈哈，我真的不知道说什么了</li>
<li>生活就是应该平淡的</li>
<li>像上学一样的工作</li>
</ul>
</div>

それでは、私たちがしなければならないこと シームレスにスクロールするだけです。

アイデア:

まず、JQuery を導入し、li 要素リストの最初の要素のコンテンツを取得します。

次に、すべての li 要素リストのコンテンツを表示します。すべての li 要素のリストの内容を取得するparent() メソッド。

次に行うことは、取得した最初の li 要素の内容を後ろのすべての li 要素のリストの内容に追加することです。

は上記に接続されており、次に行うことは最初の li 要素を非表示にすることです。最後に、setInterval('scroll_news()',1000); を繰り返し呼び出します。

最終的な完全なコードは次のとおりです:

上記はこの章の全内容です。その他の関連チュートリアルについては、

jQueryt ビデオ チュートリアル

<script type="text/javascript">
function scrollNews(){
$(document).ready(function(){
  $(&#39;#tag li&#39;).eq(0).fadeOut("slow",function(){
   $(this).clone().appendTo($(this).parent()).fadeIn("slow");
   $(this).remove();
  });
});
}
setInterval(&#39;scrollNews()&#39;,1000);
</script>

を参照してください。 ！