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 相关文章推荐
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
实测jquery data()如何存值
Aug 18 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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
PHP安全编程之加密功能
2006/10/09 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
如何基于python测量代码运行时间
2019/12/25 Python
《兰亭集序》教学反思
2014/02/11 职场文书
借名购房协议书范本
2014/10/06 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
死者家属慰问信
2015/03/24 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
成事在人观后感
2015/06/16 职场文书
Python中for后接else的语法使用
2021/05/18 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis