Js practical uninterruptible scrolling effect (good compatibility)

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
Copy codeThe Code is as follows:
<Div class = "demo" id = "demo1">
<Table cellpadding = "0" cellspacing = "0">
<Tr>
<Td> <ul>
<Li> <br>
Scroll Figure 1 </li>
<Li> <br>
Scroll Figure 2 </li>
<Li> <br>
Scroll Figure 3 </li>
<Li> <br>
Scroll figure 4 </li>
</Ul> </td>
</Tr>
</Table>
</Div>
<! -- The second scroll chart starts -->
<Div class = "demo" id = "demo2">
<Table cellpadding = "0" cellspacing = "0">
<Tr>
<Td> <ul>
<Li> <br>
Scroll Figure 1 </li>
<Li> <br>
Scroll Figure 2 </li>
<Li> <br>
Scroll Figure 3 </li>
<Li> <br>
Scroll figure 4 </li>
</Ul> </td>
</Tr>
</Table>
</Div>

2. css

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

Copy codeThe 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 the html file is loaded. Therefore, remember to place JavaScript code after the div. The implementation principle of image scrolling is similar to that of text scrolling.
DEMO code:
<Style type = "text/css"> </style> <table cellpadding = "0" cellspacing = "0"> <tbody> <tr> <td> <ul> <li> <br> rolling Chart 1 </li> <br> rolling Chart 2 </li> <br> rolling Chart 3 </li> <li> <br> scroll figure 4 </li> </ul> </td> </tr> </tbody> </table> <table cellpadding = "0" cellspacing = "0"> <tbody> <tr> <td> <ul> <li> <br> rolling Figure 1 </li> <br> rolling Figure 2 </ li> <br> rolling Chart 3 </li> <br> rolling Chart 4 </li> </ul> </td> </tr> </tbody> </table>
[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.