Create seamless scrolling News with jquery step-by-step

First of all, we have this HTML code, very concise, as follows:

1 <div id= "tag" >
2 <ul>
3 <li> You say I am a good person, I am a good person </li>
4 <li> haha, I really don't know what to say </li>
5 <li> Life is supposed to be plain </li>
6 <li> work like a school </li>
7 </ul>
8 </div>

And then all we have to do is make it roll seamlessly.

First we introduce the content into jquery and get to the first element in the LI element list

Here we are using the Clone () method to get and then display its contents:

1 <script type= "Text/javascript" src= "Jquery-1.3.2.min.js" ></script>
2 <script type= "Text/javascript" >
3 $ (document). Ready (function () {
4 $ (' #tag li '). EQ (0). Click (function () {
5 alert (this). Clone (). text ()); The result is "are you saying I'm a good person, I'm a good person?" represents the text content of the first LI element
6});
7 </script>

Then there is the list of all the LI elements, and here we use the parent () method to get a list of all the LI elements:

Code

The next thing to do is append the contents of the first LI element you get to the contents of all LI elements list:

Code

Received above, continue to do is to let the first LI element to hide, as follows:

Code

Finally using SetInterval (' scroll_news () ', 1000);

The final complete code is as follows:

Code

In fact, a step-by-step, will eventually get results

Create seamless scrolling News with jquery step-by-step