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

JS实现图片无间断滚动代码汇总

Posted in Javascript onJuly 30, 2014

本文整理汇总了JavaScript实现图片滚动的常见代码，可以实现向上下左右四个方向的无缝滚动的效果，这是前端设计开发时常用的一个图片特效，你可只用其中的一种滚动效果。

具体的实例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>图片滚动代码合集</title>
<script type="text/javascript">
// 自动滚动
function boxmove(d1,d2,d3,e,obj){
 var speed=30;
 var demo=document.getElementById(d1);
 var demo1=document.getElementById(d2);
 var demo2=document.getElementById(d3);
 demo2.innerHTML=demo1.innerHTML;
 function boxTop(){
   if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
   else{demo.scrollTop++}
  }
 function boxRight(){
   if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
   else{demo.scrollLeft--}
  }
 function boxBottom(){
   if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
   else{demo.scrollTop--}
  }
 function boxLeft(){
   if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
   else{demo.scrollLeft++}
  }
 if(e==1){
   var MoveTop=setInterval(boxTop,speed);
   demo.onmouseover=function(){clearInterval(MoveTop);}
   demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)}
  }
 if(e==2){
   var MoveRight=setInterval(boxRight,speed);
   demo.onmouseover=function(){clearInterval(MoveRight)}
   demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)}
  }
 if(e==3){
   var MoveBottom=setInterval(boxBottom,speed);
   demo.onmouseover=function(){clearInterval(MoveBottom);}
   demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)}
  }
 if(e==4){
   var MoveLeft=setInterval(boxLeft,speed)
   demo.onmouseover=function(){clearInterval(MoveLeft)}
   demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)}
  }
 if(e=="top"){
   MoveTop=setInterval(boxTop,speed)
   obj.onmouseout=function(){clearInterval(MoveTop);}
  }
 if(e=="right"){
   MoveRight=setInterval(boxRight,speed)
   obj.onmouseout=function(){clearInterval(MoveRight);}
  }
 if(e=="bottom"){
   MoveBottom=setInterval(boxBottom,speed)
   obj.onmouseout=function(){clearInterval(MoveBottom);}
  }
 if(e=="left"){
   MoveLeft=setInterval(boxLeft,speed)
   obj.onmouseout=function(){clearInterval(MoveLeft);}
  }
 }
</script>
<style type="text/css">
div#a,div#b,div#c,div#d { float:left;}
h2 { clear:both; }
div#b,div#d,div#bb { white-space:nowrap; }
</style>
</head>
<body>
<h1>滚动合集</h1>
<hr />
<h2>向上</h2>
<div id="a" style="overflow:hidden;height:100px;width:90px;">
<div id="a1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="a2"></div>
</div>
<script type="text/javascript">
boxmove("a","a1","a2",1);
</script>
<h2>向右</h2>
<div id="b" style="overflow:hidden;height:100px;width:90px;">
<div id="b1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="b2"></div>
</div>
<script type="text/javascript">
boxmove("b","b1","b2",2);
</script>
<h2>向下</h2>
<div id="c" style="overflow:hidden;height:100px;width:90px;">
<div id="c1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="c2"></div>
</div>
<script type="text/javascript">
boxmove("c","c1","c2",3);
</script>
<h2>向左</h2>
<div id="d" style="overflow:hidden;height:100px;width:90px;">
<div id="d1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="d2"></div>
</div>
<script type="text/javascript">
boxmove("d","d1","d2",4);
</script>
<h2>手动滚动 - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>
<div id="aa" style="overflow:hidden;height:100px;width:90px;">
<div id="aa1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="aa2"></div>
</div>
<h2>手动滚动 - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;">
<div id="bb1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="bb2"></div>
</div>
</body>
</html>

JS实现图片无间断滚动代码汇总

- Author -

shichen2014

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

Javascript 相关文章推荐
Knockoutjs的环境搭建教程
Nov 26 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
Bootstrap4 gulp 配置详解
Jan 06 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
ES6中的类（Class）示例详解
Dec 09 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 #Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 #Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 #Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 #Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 #Javascript
js返回前一页刷新本页重载页面
Jul 29 #Javascript
extjs 如何给column 加上提示
Jul 29 #Javascript
Keras(3) name_scope (1) blinker(1) 神经网络(7) 字符集(1) variable_scope(1) data(4) mysql(6) character(1) 三子棋(2)
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
asp.net+js实现金额格式化
2015/02/27 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python数据类型详解（二）列表
2016/05/08 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Python基于百度云文字识别API
2018/12/13 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
学校岗位设置方案
2014/01/16 职场文书
优秀教师获奖感言
2014/01/31 职场文书
教师节演讲稿
2014/05/06 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
投资入股合作协议书
2014/10/28 职场文书
公司更名通知函
2015/04/24 职场文书
2015年除四害工作总结
2015/07/23 职场文书