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

更新时间：2010年05月04日 16:39:46 作者：

整理一个div+css图片连续滚动代码，原理跟脚本之家之前发布的文章一样。

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

如需要更多的功能可以参考下面的内容：
JavaScript 四个方向图片滚动效果
JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

您可能感兴趣的文章:

微信sdk实现禁止微信分享(使用原生php实现)
这篇文章主要介绍了微信sdk实现禁止微信分享(使用原生php实现)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
javascript模拟鼠标点击事件原理和实现方法
本文详细介绍了JS模拟鼠标点击事件的原理以及应用场景,并提供了模拟鼠标左键点击事件、右键点击事件、滚轮事件和移动事件的代码实现,了解JS模拟鼠标点击事件的原理和实现方法对于开发人员非常重要,这对于许多面向用户的web应用程序的开发和测试都具有很重要的意义
2023-09-09
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
这篇文章主要介绍了JavaScript常用正则验证函数,结合实例形式总结分析了javascript针对年龄、数字、Email、手机、URL、日期等格式常用正则验证技巧,需要的朋友可以参考下
2017-01-01
JavaScript随机生成信用卡卡号的方法
这篇文章主要介绍了JavaScript随机生成信用卡卡号的方法,涉及javascript操作随机随机数生成信用卡卡号的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
为指定元素增加样式的js代码
从此例子中发现，js对"" 与 " " ，注意中间还有一空格，解析是非常严格的。在java与net中还有待于研究。
2009-12-12
javascript防抖函数debounce详解
这篇文章主要介绍了javascript防抖函数debounce,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
2019-06-06
Ajax，UTF-8还是GB2312 eval 还是execScript
讨厌的东西。关于Ajax获取HTML内容编码，与JavaScript载入脚本的动态执行问题。
2008-11-11
javascript遇到html5的一些表单属性
这篇文章主要介绍了javascript遇到html5的一些表单属性的相关资料,需要的朋友可以参考下
2015-07-07
详解javascript的变量与标识符
这篇文章主要为大家介绍了javascript的变量与标识符，感兴趣的小伙伴们可以参考一下
2016-01-01
理解JavaScript设计模式中的建造者模式
这篇文章主要介绍了理解JavaScript设计模式中的建造者模式,文章基于JavaScript的相关资料展开箱子内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-04-04

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具