Home > Developer > JavaScript
After looking for a long time, I finally found a suitable one. I can change the width and number of images as needed. I can call the database code dynamically and cyclically.
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> image scrolling </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 = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>
</Div>
<Script>
<! --
Var speed = 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
