div+css布局的圖片連續滾動js實現代碼

2019-11-21 00:31:55

字體：大中小

來源：轉載

供稿：網友

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>無標題文檔</title> 
<script type="text/javascript" src="Marquee.js"></script> 
<style type="text/css"> 
<!-- 
* { 
margin:0; 
padding:0; 
} 
#demo { 
/*********必須的 保證超出寬度能夠滾動*********/ 
width:600px;/*可視區域寬度*/ 
overflow:hidden; 
/*********必須的 保證超出寬度能夠滾動*********/ 
height:80px; 
} 
#demo1,#demo2 { 
width:800px;/*整個圖片寬度*/ 
float:left; 
} 
#demo img{ 
display:block; 
float:left; 
} 
#demo li { 
float:left; 
width:60px; 
height:80px; 
} 
--> 
<!-- 
#demo0 { 
/*********必須的 保證超出寬度能夠滾動*********/ 
width:600px;/*可視區域寬度*/ 
overflow:hidden; 
/*********必須的 保證超出寬度能夠滾動*********/ 
height:80px; 
} 
#demo11,#demo22 { 
width:1020px;/*整個圖片寬度*/ 
display:block; 
height:80px; 
} 
#demo0 li { 
float:left; 
margin:0 5px; 
width:60px; 
height:80px; 
} 
--> 
</style> 
</head> 
<body> 
<!--結構必須的――<div class="demo"> 
<div class="demo1"></div> 
<div class="demo2"></div> 
</div>――結構必須的――--> 
<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核心代碼

復制代碼代碼如下:

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

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

//向左滾動函數，demo包含demo1與demo2,speed是滾動速度，flag一個網頁內有多個時設置為不同的任意字符。 
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); 
} 
} 


//向右滾動函數，demo包含demo1與demo2,speed是滾動速度，flag一個網頁內有多個時設置為不同的任意字符。 
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); 
} 
} 