Detailed explanation of steps to create seamless scrolling news with JQuery

This article mainly introduces the method of creating seamless scrolling news based on JQuery. Share it with everyone for your reference, the details are as follows:

First of all, we have such a piece of html code here, which is very concise, as shown below:

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

Then what we have to do Just make it scroll seamlessly.

Idea:

First we introduce JQuery and get the content of the first element in the li element list;

Then we display all li elements List content, here we use the parent() method to get the list content of all li elements;

The next thing to do is to append the content of the first li element obtained to the list content of all li elements behind;

is connected to the above, and the next thing to do is to hide the first li element;

Finally, use setInterval('scroll_news()',1000); and call it repeatedly. Can.

The final complete code is as follows:

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

The above is the entire content of this chapter. For more related tutorials, please visit jQueryt Video Tutorial!