快捷導(dǎo)航

div+css布局的圖片連續(xù)滾動(dòng)js實(shí)現(xiàn)代碼

更新時(shí)間：2010年05月04日 16:39:46 作者：

整理一個(gè)div+css圖片連續(xù)滾動(dòng)代碼，原理跟腳本之家之前發(fā)布的文章一樣。

html布局代碼

 
<!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>無(wú)標(biāo)題文檔</title> 
<script type="text/javascript" src="Marquee.js"></script> 
<style type="text/css"> 
<!-- 
* { 
margin:0; 
padding:0; 
} 
#demo { 
/*********必須的 保證超出寬度能夠滾動(dòng)*********/ 
width:600px;/*可視區(qū)域?qū)挾?/ 
overflow:hidden; 
/*********必須的 保證超出寬度能夠滾動(dòng)*********/ 
height:80px; 
} 
#demo1,#demo2 { 
width:800px;/*整個(gè)圖片寬度*/ 
float:left; 
} 
#demo img{ 
display:block; 
float:left; 
} 
#demo li { 
float:left; 
width:60px; 
height:80px; 
} 
--> 
<!-- 
#demo0 { 
/*********必須的 保證超出寬度能夠滾動(dòng)*********/ 
width:600px;/*可視區(qū)域?qū)挾?/ 
overflow:hidden; 
/*********必須的 保證超出寬度能夠滾動(dòng)*********/ 
height:80px; 
} 
#demo11,#demo22 { 
width:1020px;/*整個(gè)圖片寬度*/ 
display:block; 
height:80px; 
} 
#demo0 li { 
float:left; 
margin:0 5px; 
width:60px; 
height:80px; 
} 
--> 
</style> 
</head> 
<body> 
<!--結(jié)構(gòu)必須的——<div class="demo"> 
<div class="demo1"></div> 
<div class="demo2"></div> 
</div>——結(jié)構(gòu)必須的——--> 
<div id="demo"> 
<ul id="demo1"> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
</ul> 
<ul id="demo2"></ul> 
</div> 

<!--<div id="demo0"> 
<div id="demo11"> 
<ul> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li> 
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></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核心代碼

復(fù)制代碼代碼如下:

 
//調(diào)用向左滾動(dòng) 
//toleft("demo","demo1","demo2",30,"ti1") 
//調(diào)用向右滾動(dòng) 
//toright("demo0","demo11","demo22",20,"ti2") 

function $(id) 
{ 
return document.getElementById(id) 
} 

//向左滾動(dòng)函數(shù)，demo包含demo1與demo2,speed是滾動(dòng)速度，flag一個(gè)網(wǎng)頁(yè)內(nèi)有多個(gè)時(shí)設(shè)置為不同的任意字符。 
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); 
} 
} 


//向右滾動(dòng)函數(shù)，demo包含demo1與demo2,speed是滾動(dòng)速度，flag一個(gè)網(wǎng)頁(yè)內(nèi)有多個(gè)時(shí)設(shè)置為不同的任意字符。 
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); 
} 
} 