Idea:
A set of pictures controls its rolling bar for rolling, and at this time, copying this set of pictures and adding it into the original picture group, there are now two sets of pictures. You can imagine that the rolling bar continues to roll now. The last picture of the picture of the picture has been rolled to the top and disappeared. The first picture of the copy of the picture appeared after the last picture of the original picture. At this time, you can be able to Feel seamless scrolling.
Copy code code as follows:
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<Title> JS Pictures Rolling Left </Title>
<Style Type = "Text/CSS">
img {
border: None;
}
</style>
</head>
<body>
<div ID = "demo" style = "overflow: hidden; width: 500px;">
<Table Border = 0 Align = Center Cellpadding = 1 Cellspacing = 1 Cellspace = 0>
<tr>
<td ID = "demo1" value = "top" bgcolor = "ffffff">
<!- Special attention, the total width of the following picture must be greater than the width of the DEMO defined above. If the width of the above demo above is 500px, the total width of the picture below must be greater than 500, otherwise there will be some problems! ->
<Table cellspacing = "0" cellpadding = "0">
<tr align = "center">
<td> <a href = "#" target = "_lank"> <img src = "Images/1.jpg"> </a> </td>
<td> <a href = "#" target = "_lank"> <img src = "Images/2.jpg"> </a> </td>
<td> <a href = "#" target = "_ blank"> <img src = "Images/3.jpg"> </a> </td>
<td> <a href = "#" target = "_ blank"> <img src = "Images/4.jpg"> </a> </td>
<td> <a href = "#" target = "_lank"> <img src = "Images/5.jpg"> </a> </td>
</tr>
</table>
</td>
<td ID = "demo2" value = "top">
</td>
</tr>
</table>
</div>
<div ID = "msg"> </div>
<script type = "text/javascript" src = "jquery.js"> </script>
<script type = "text/javascript">
// 0: fixed speed
varulaed = 30;
// 1: Get the element Demo Demo1 Demo2
var demo = $ ("#demo");
var demo1 = $ ("#demo1");
var demo2 = $ ("#demo2");
// 2: Copy DEMO1-> DEMO2
var Cont = $ ("#demo1"). html ();
$ ("#demo2"). html (cont);
// 3: Create the method to execute time
function hello () {
var left = $ ("#demo"). scrolllect ();
if (left> = $ ("#demo1"). width ()) {
left = 0;
} Else {
left ++;
}
$ ("#demo"). Scrollleft (left);
settimeout ("Hello ()", Speed);
}
hello ();
// Move demo.scrollleft ();
</script>
</body>
</html>