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


Posted in Javascript onMay 04, 2010

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)
Javascript 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
javascript面向对象之Javascript 继承
May 04 #Javascript
Javascript 面向对象之重载
May 04 #Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 #Javascript
javascript 面向对象的JavaScript类
May 04 #Javascript
JavaScript 面向对象之命名空间
May 04 #Javascript
10个实用的脚本代码工具
May 04 #Javascript
利用location.hash实现跨域iframe自适应
May 04 #Javascript
You might like
多文件上传的例子
2006/10/09 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
Laravel框架表单验证详解
2014/09/04 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
详解Python中的type()方法的使用
2015/05/21 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
详解Python3定时器任务代码
2019/09/23 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
应届生污水处理求职信
2013/11/06 职场文书
个人思想理论学习的自我鉴定
2013/11/30 职场文书
医学生自荐信范文
2013/12/03 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
社区服务标语
2014/07/01 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
2016公司年会主持词
2015/07/01 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL