Create seamless scrolling news steps based on jquery _jquery

This article illustrates the method of creating seamless scrolling news based on jquery. Share to everyone for your reference, specific as follows:

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

<ul>
<li> You say I'm a good guy, I'm a good guy </li>
<li> haha, I really don't know what to say. </li>
<li> Life is supposed to be bland </li>
<li> work like school </li>
</ul>
</div>

Then all we have to do is make it scroll seamlessly.

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

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

<script type= "Text/javascript" src= "jquery-1.3.2.min.js" ></script>
<script type= "text/" JavaScript ">
$ (document). Ready (function () {
  $ (' #tag li '). EQ (0). Click (function () {
   alert ($) . Clone (). text ());
   The result is "Do you think I'm a good guy, I'm a good guy?" represents the first LI element's text content
});
</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:

<script type= "Text/javascript" >
$ (document). Ready (function () {
  $ (' #tag li '). EQ (0). fadeout ("Slow", function () {
   //alert ($ (). Clone (). text ());//The result displayed is "Do you call me a good man, I am a good man?" represents the text content 
   alert ($ (this) for the first LI element. Parent (). text ());//The result displayed is the content between four Li elements
});
</script>

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

<script type= "Text/javascript" >
$ (document). Ready (function () {
  $ (' #tag li '). EQ (0). fadeout ("Slow", function () {
   //alert ($ (this). Clone (). text ()); The result is "Do you call me a good man, I'm a good man?" represents the text content of the first LI element 
   //alert ($ (this). Parent (). text ()); The result displayed is the contents of $ (this) between four Li elements.
   clone (). Appendto ($ (this). parent ());//You can see that the first LI element in the page is automatically added to the end of the fourth Li element
}
. </script>

To the above, continue to do is to let the first LI element to hide, the following practices:

<script type= "Text/javascript" >
$ (document). Ready (function () {
  $ (' #tag li '). EQ (0). fadeout ("Slow", function () {
   //alert ($ (this). Clone (). text ());  The result is "Do you call me a good man, I'm a good guy?" represents the text content of the first LI element 
   //alert ($ (this). Parent (). text ());  The result displayed is the content between four Li elements
   //alert ($ (this). Clone (). Appendto ($ (this). Parent ()). text ()); You can see that the first LI element in the page is automatically added to the end of the fourth Li element
   $ (this). Clone (). Appendto ($ (this). Parent ()). FadeIn ("slow");
  };
});
</script>

The final use of SetInterval (' scroll_news () ', 1000);

The final complete code is as follows:

<script type= "Text/javascript" >
function Scrollnews () {
$ (document). Ready (function () {
  $ (' # Tag Li '). EQ (0). fadeout ("Slow", function () {
   $ (this). Clone (). Appendto ($ (this). Parent ()). FadeIn ("slow");
   $ (this). Remove ();}
  )
;} SetInterval (' scrollnews () ', 1000);
</script>

In fact, step-by-step, the results will eventually be

More interested readers of jquery-related content can view this site: "jquery switching effects and tips summary", "jquery drag and drop effects and tips summary", "JQuery Extended Skills Summary", "jquery common Classic Effects summary", " jquery animation and special effects usage summary, "jquery selector usage Summary" and "jquery commonly used plug-in and usage summary"

I hope this article will help you with the jquery program design.