After finding it for a long time, I finally found a suitable one. Just change the width and the number of images according to the needs.
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 = gb2312" /> />
<Title> Picture Rolling </Title>
</head>
<body>
<Style Type = "Text/CSS">
<!--
#Demo {
background: #fff;
overflow: hidden;
border: 1px dashed #ccc;
width: 500px;
}
#Demo img {
border: 3px solid #F2F2F2;
}
#indemo {
Float: left;
width: 800%;
}
#demo1 {{
Float: left;
}
#demo2 {{
Float: left;
}
->
</style>
<div ID = "Demo">
<div ID = "Indemo">
<div ID = "Demo1">
<A HREF = "#"> <IMG SRC = "/JSCSS/DEMOIMG/WALL_S1.jpg"/> </a>
<A href = "#"> <img src = "/jscss/demoimg/wall_s2.jpg"/> </a>
<A href = "#"> <img src = "/jscss/demoimg/wall_s3.jpg"/> </a>
<A href = "#"> <img src = "/jscss/demoimg/wall_s4.jpg"/> </a>
<A href = "#"> <img src = "/jscss/demoimg/wall_s5.jpg"/> </a>
<A HREF = "#"> <IMG SRC = "/JSCSS/DEMOIMG/WALL_S6.JPG"/> </a>
</div>
<div ID = "Demo2"> </DIV>
</div>
</div>
<script>
<!--
varulaed = 10;
var tab = document.GetelementByid ("demo");
var tab1 = document.GetelementByid ("demo1");
var tab2 = document.GetelementByid ("demo2");
tab2.innerhtml = tab1.innerhtml;
Function Marquee () {
if (tab2.offsetwidth-tab.scrolLLEFT <= 0)
tab.scrollleft- = tab1.OffsetWidth
else {
tab.scrollleft ++;
}
}
var mymar = SetInterval (Marquee, Speed);
tab.onmouseover = Function () {Clearinterval (mymar)};
tab.onMouSeout = Function () {Mymar = SetInterval (Marquee, Speed)};
->
</script>
</body>
</html>