首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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)

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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
FTP服务器(1) 粒子对撞机(1) IIS7(1) 磁盘分区(1) 国际空间站(1) 对撞机(1) 界面设计(1) .NET Framework(2) DNS服务器(2) 夸克(1)
You might like
PHP高自定义性安全验证码代码
2011/11/27 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
vue实现购物车小案例
2019/09/27 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
python2与python3的print及字符串格式化小结
2018/11/30 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
美国眼镜在线零售商：Dualens
2019/12/07 全球购物
EMPHASIS艾斐诗官网：周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
销售主管的自我评价分享
2014/01/03 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
公司股权转让协议书
2014/04/12 职场文书
员工2014年度工作总结
2014/12/09 职场文书
中班上学期个人总结
2015/02/12 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
阿里云日志过滤器配置日志服务
2022/04/09 Servers