首页
所有分类
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 相关文章推荐
js 内存释放问题
Apr 25 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
js+css实现导航效果实例
Feb 10 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
jquery+html5时钟特效代码分享（可设置闹钟并且语音提醒）
Mar 30 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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
axios(1) Set接口(1) OutputStream(1) persistedstate(1) vuex(1) Vue(10) Storage(1) 本地化存储(1) InputStream(1) HashSet集合(1)
You might like
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
PHP单例模式详细介绍
2015/07/01 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
javascript add event remove event
2008/04/07 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
JS验证字符串功能
2017/02/22 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue过滤器用法实例分析
2019/03/15 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
解读! Python在人工智能中的作用
2017/11/14 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python tkinter组件使用详解
2019/09/16 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python 牛顿法实现逻辑回归（Logistic Regression）
2020/10/15 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
应用服务器有那些
2012/01/19 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
董事长职责范文
2013/11/08 职场文书
大学班级学风建设方案
2014/05/01 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
青年标兵事迹材料
2014/08/16 职场文书
幼儿园开学家长寄语（2016秋季）
2015/12/03 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书