Explication détaillée des étapes pour créer des actualités à défilement fluide avec JQuery

Cet article présente principalement la méthode de création d'actualités à défilement transparent basée sur JQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Tout d'abord, nous avons ici un tel morceau de code html, qui est très concis, comme indiqué ci-dessous :

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

Ensuite, ce que nous devons faire : faites-le simplement défiler de manière transparente.

Idée :

Nous introduisons d'abord JQuery et obtenons le contenu du premier élément de la liste des éléments li

Ensuite, nous affichons le contenu de la liste de tous les éléments li, ici nous utilisons la méthode parent() pour obtenir le contenu de la liste de tous les éléments li ;

La prochaine chose à faire est d'ajouter le contenu du premier élément li obtenu au contenu de la liste de tous les éléments li derrière

est connecté à ce qui précède, et la prochaine chose à faire est de masquer le premier élément li ;

Enfin, utilisez setInterval('scroll_news()',1000);

Le code final complet est le suivant :

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

Ce qui précède représente l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQueryt. !