Js practical uninterrupted rolling chart effect (good compatibility) _ image effects

There are a lot of effects code for scrolling images on the Internet, but most of them are not compatible, or the structure is messy. xhtml, css, and js are not well optimized. The following describes a method. Basically, the structure and behavior are separated, and only one connection is required.
It is easy to use, and the same js Code can achieve the effects of multiple scrolling graphs on this page without mutual interference,
1. xhtml

The Code is as follows:

Scroll Scroll Scroll Scroll

Scroll Scroll Scroll Scroll

2. css

The Code is as follows:

Ul, li, img, td {font-size: 12px; list-style-type: none; text-align: center; margin: 0; padding: 0 ;}
. Demo {width: 230px; margin-bottom: 8px; height: 172px; overflow: hidden ;}
. Demo ul {width: 408px; clear: both ;}
. Demo li {width: 102px; float: left; text-align: center ;}
. Demo img {margin-bottom: 8px ;}

3. js

The Code is as follows:

Function startmarquee (lh, speed, delay, index ){
Var o = document. getElementById ("demo" + index );
Var o_td = o. getElementsByTagName ("td") [0];
Var str = o_td.innerHTML;
Var newtd = document. createElement ("td ");
Newtd. innerHTML = str;
O_td.parentNode.appendChild (newtd );
Var t;
Var p = false;
O. onmouseover = function () {p = true ;}
O. onmouseout = function () {p = false ;}
Function start (){
T = setInterval (Marquee, speed );
If (! P) {o. scrollLeft + = 3 ;}
}
Function Marquee (){
If (o_td.offsetWidth-o.scrollLeft <= 0)
O. scrollLeft-= o_td.offsetWidth;
Else {
If (o. scrollLeft % lh! = 0 ){
O. scrollLeft + = 3
} Else {clearInterval (t); setTimeout (start, delay );}
}
}
SetTimeout (start, delay );
}
Startmarquee (,); // stop-scroll between images
Startmarquee (,); // The image is continuously scrolling.

Test code: JavaScript code can run normally only after html files are loaded. Therefore, remember to put JavaScript code after p. The implementation principle of image scrolling is similar to that of text scrolling.
DEMO code:

<Style type = "text/css"> <! -- Ul, li, img, td {margin: 0; padding: 0; font-size: 12px; list-style-type: none; text-align: center ;}. demo {width: 230px; margin-bottom: 8px; height: 172px; overflow: hidden ;}. demo ul {width: 408px; clear: both;}/* 102*4 = 408px equals the total width of the actual content */. demo li {width: 102px; float: left; text-align: center ;}. demo img {margin-bottom: 8px ;}--> </style> <p class = "demo" id = "demo1"> <table cellpadding = "0" cellspac Ing = "0"> <tbody> <tr> <td> <ul> <li> <br> scroll </li> <li> <br> scroll </li> </ul> </td> </tr> </tbody> </ table> </p> <p class = "demo" id = "demo2"> <table cellpadding = "0" cellspacing = "0"> <tbody> <tr> <td> <ul> <li> <br> rolling </li> <li> <br> scroll </li> </ul> </td> </tr> </tbody> </table> </p> <script type = "text/javascript "language =" JavaScript ">/// <! [CDATA [function startmarquee (lh, speed, delay, index) {var o = document. getElementById ("demo" + index); var o_td = o. getElementsByTagName ("td") [0]; var str = o_td.innerHTML; var newtd = document. createElement ("td"); newtd. innerHTML = str; o_td.parentNode.appendChild (newtd); var t; var p = false; o. onmouseover = function () {p = true;} o. onmouseout = function () {p = false;} function start () {t = setInterval (Marquee, speed); if (! P) {o. scrollLeft + = 3 ;}} function Marquee () {if (o_td.offsetWidth-o.scrollLeft <= 0) o. scrollLeft-= o_td.offsetWidth; else {if (o. scrollLeft % lh! = 0) {o. scrollLeft + = 3} else {clearInterval (t); setTimeout (start, delay) ;}} setTimeout (start, delay);} startmarquee ); startmarquee (,); //]> script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

In the code, it is for an image of 102 width. You can modify it in the code to fit the width of your image size.