DIV+CSS+JS不間斷橫向滾動(dòng)實(shí)現(xiàn)代碼

更新時(shí)間：2013年03月19日 14:39:11 作者：

不間斷橫向滾動(dòng)想必大家在很多場(chǎng)合都有見(jiàn)過(guò)吧，本文也使用DIV+CSS+JS實(shí)現(xiàn)一個(gè)，感興趣的你可以參考下哈，希望對(duì)你學(xué)習(xí)有所幫助

DIV+CSS+JS實(shí)現(xiàn)不間斷橫向滾動(dòng)代碼

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>橫向不間斷滾動(dòng)DIV CSS代碼-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;}/* 設(shè)置ul和li橫排 */ 
</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 >DIVCSS5</a>演示說(shuō)明：向左滾動(dòng)</h2> 
<div style="text-align:center"> 
<div class="sqBorder"> 
<!--#####滾動(dòng)區(qū)域#####--> 
<div id="scroll_div" class="scroll_div"> 
<div id="scroll_begin"> 
<ul> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" alt="div css" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" alt="divcss" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" alt="CSS" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" alt="divcss5" /></a></li> 
<li><a ><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
</ul> 
</div> 
<div id="scroll_end"></div> 
</div> 
<!--#####滾動(dòng)區(qū)域#####--> 
</div> 
<script type="text/javascript">ScrollImgLeft();</script> 
</div> 
<!--//向左滾動(dòng)代碼結(jié)束--> 
</body></html> 