div+css布局的图片连续滚动js实现代码

143 阅读 0 评论 95 点赞

我是靠谱客的博主爱撒娇鼠标，最近开发中收集的这篇文章主要介绍div+css布局的图片连续滚动js实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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); 
} 
} 