Html layout code
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Script type = "text/javascript" src = "Marquee. js"> </script>
<Style type = "text/css">
<! --
*{
Margin: 0;
Padding: 0;
}
# Demo {
/********* Ensure that the image is rolled out of the specified width *********/
Width: 600px;/* visible area width */
Overflow: hidden;
/********* Ensure that the image is rolled out of the specified width *********/
Height: 80px;
}
# Demo1, # demo2 {
Width: 800px;/* width of the entire image */
Float: left;
}
# Demo img {
Display: block;
Float: left;
}
# Demo li {
Float: left;
Width: 60px;
Height: 80px;
}
-->
<! --
# Demo0 {
/********* Ensure that the image is rolled out of the specified width *********/
Width: 600px;/* visible area width */
Overflow: hidden;
/********* Ensure that the image is rolled out of the specified width *********/
Height: 80px;
}
# Demo11, # demo22 {
Width: 1020px;/* width of the entire image */
Display: block;
Height: 80px;
}
# Demo0 li {
Float: left;
Margin: 0 5px;
Width: 60px;
Height: 80px;
}
-->
</Style>
</Head>
<Body>
<! -- Required structure -- <div class = "demo">
<Div class = "demo1"> </div>
<Div class = "demo2"> </div>
</Div> -- the structure must be ---->
<Div id = "demo">
<Ul id = "demo1">
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
</Ul>
<Ul id = "demo2"> </ul>
</Div>
<! -- <Div id = "demo0">
<Div id = "demo11">
<Ul>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
</Ul>
</Div>
<Div id = "demo22"> </div>
</Div> -->
<Script>
Toleft ("demo", "demo1", "demo2", 30, "onedemo ");
// Toright ("demo0", "demo11", "demo22", 20, "ti2 ");
</Script>
</Body>
</Html>
Js core code
Copy codeThe Code is as follows:
// Call to scroll left
// Toleft ("demo", "demo1", "demo2", 30, "ti1 ")
// Call to scroll to the right
// Toright ("demo0", "demo11", "demo22", 20, "ti2 ")
Function $ (id)
{
Return document. getElementById (id)
}
// The left-side scrolling function. The demo contains demo1 and demo2. The speed is the scroll speed. If a flag contains multiple characters, it is set to any character.
Function toleft (demo, demo1, demo2, speed, flag)
{
Demo = $ (demo );
Demo1 = $(demo1 );
Demo2 = $ (demo2)
Demo2.innerHTML = demo1.innerHTML
Function Marquee ()
{
If (demo2.offsetWidth-demo. scrollLeft <= 0)
{
Demo. scrollLeft-= demo1.offsetWidth
}
Else
{
Demo. scrollLeft ++
}
}
Flag = setInterval (Marquee, speed)
Demo. onmouseover = function ()
{
ClearInterval (flag );
}
Demo. onmouseout = function ()
{
Flag = setInterval (Marquee, speed );
}
}
// The scroll to the right function. The demo contains demo1 and demo2. speed indicates the scroll speed. If a flag contains multiple characters, it is set to any character.
Function toright (demo, demo1, demo2, speed, flag)
{
Demo = $ (demo );
Demo1 = $(demo1 );
Demo2 = $ (demo2)
Demo2.innerHTML = demo1.innerHTML
Function Marquee ()
{
If (demo. scrollLeft <= 0)
{
Demo. scrollLeft = demo2.offsetWidth
}
Else
{
Demo. scrollLeft --
}
}
Flag = setInterval (Marquee, speed)
Demo. onmouseover = function ()
{
ClearInterval (flag );
}
Demo. onmouseout = function ()
{
Flag = setInterval (Marquee, speed );
}
}
For more functions, refer to the following content:
JavaScript image scrolling in four directions
JavaScript seamless up, down, left, and right scrolling to add a fixed height, width, and pause effect (compatible with ie/ff)