Create a simple loop plug-in effect based on insertBefore and an insertbefore

Create a simple loop plug-in effect based on insertBefore and an insertbefore

Display:

View Source Code

[Function description]

Use insertBefore to create a simple loop plug-in effect

[HTML code description]

<ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in">4</li> <li class="in">5</li> <li class="in">6</li>  </ul>

[CSS code description]

.in{ height: 20px; line-height: 20px; width: 20px; background-color: blue; text-align: center; color: white;}

[JS Code description]

Var oList = document. getElementById ('LIST'); // Add a li element var oAdd = document. createElement ('lil'); // you can specify the css style oAdd for the newly added element. className = "in" Export oadd.style.css Text = 'background-color: red; border-radius: 100'; // Add it to oList. insertBefore (oAdd, null); var num =-1; var max = oList. children. length; function incrementNumber () {num ++; // oList. getElementsByTagName ('lil') [max] is equivalent to null, so the oList is not reported. insertBefore (oAdd, oList. getElementsByTagName ('lil') [num]); if (num = max) {num =-1 ;}if (num = 0) {num = 1 ;} setTimeout (incrementNumber, 1000);} setTimeout (incrementNumber, 1000 );

Well, the above is all the content of this article. The code is very simple. I believe everyone can understand it. If you need it, please refer to this article. I hope everyone will like it.