Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang langkah-langkah untuk mencipta berita tatal lancar dengan JQuery

Penjelasan terperinci tentang langkah-langkah untuk mencipta berita tatal lancar dengan JQuery

PHPz
Lepaskan: 2018-09-28 15:13:34
asal
1572 orang telah melayarinya

Artikel ini terutamanya memperkenalkan kaedah mencipta berita tatal lancar berdasarkan JQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Pertama sekali, kami mempunyai sekeping kod html di sini, yang sangat ringkas, seperti yang ditunjukkan di bawah:

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

Kemudian apa yang perlu kita lakukan Hanya buat tatalnya dengan lancar.

Idea:

Mula-mula kami memperkenalkan JQuery dan mendapatkan kandungan elemen pertama dalam senarai elemen li

Kemudian kami memaparkan semua kandungan Senarai elemen li, di sini kami gunakan kaedah induk() untuk mendapatkan kandungan senarai semua elemen li;

disambungkan kepada perkara di atas, dan perkara seterusnya yang perlu dilakukan ialah menyembunyikan elemen li pertama

Akhir sekali, gunakan setInterval('scroll_news()',1000);

Kod lengkap terakhir adalah seperti berikut:

Di atas ialah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila lawati

tutorial video 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>
Salin selepas log masuk
!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan