DIV + CSS + JS implements uninterrupted horizontal scrolling code
Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> div css code scrolling horizontally without interruption-DIVCSS5 </title>
</Head>
<Body>
<Style>
. Scroll_div {width: 600px; height: 49px; margin: 0 auto; overflow: hidden; white-space: nowrap; background: # ffffff ;}
. Scroll_div img {width: 120px; height: 49px; border: 0; margin: auto 8px ;}
# Scroll_begin, # scroll_end, # scroll_begin ul, # scroll_end ul, # scroll_begin ul li, # scroll_end ul li {display: inline;}/* Set ul and li horizontal bars */
</Style>
<Script language = "javascript">
Function ScrollImgLeft (){
Var speed = 20
Var scroll_begin = document. getElementById ("scroll_begin ");
Var scroll_end = document. getElementById ("scroll_end ");
Var scroll_div = document. getElementById ("scroll_div ");
Scroll_end.innerHTML = scroll_begin.innerHTML
Function Marquee (){
If (scroll_end.offsetWidth-scroll_div.scrollLeft <= 0)
Scroll_div.scrollLeft-= scroll_begin.offsetWidth
Else
Scroll_div.scrollLeft ++
}
Var MyMar = setInterval (Marquee, speed)
Scroll_div.onmouseover = function () {clearInterval (MyMar )}
Scroll_div.onmouseout = function () {MyMar = setInterval (Marquee, speed )}
}
</Script>
<H2 align = "center"> <a href = "http://www.divcss5.com/"> DIVCSS5 </a> demo Description: Scroll left <Div style = "text-align: center">
<Div class = "sqBorder">
<! -- ##### Rolling area ##### -->
<Div id = "scroll_div" class = "scroll_div">
<Div id = "scroll_begin">
<Ul>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
<Li> <a href = "http://www.divcss5.com/"> </a> </li>
</Ul>
</Div>
<Div id = "scroll_end"> </div>
</Div>
<! -- ##### Rolling area ##### -->
</Div>
<Script type = "text/javascript"> ScrollImgLeft (); </script>
</Div>
<! -- // Scroll to the left to end the code -->
</Body>
