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>
Javascript 相关文章推荐
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
JS实现json数组排序操作实例分析
Oct 28 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
You might like
php 删除数组元素
2009/01/16 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
python字符串替换的2种方法
2014/11/30 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
python实现批量图片格式转换
2020/06/16 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
django 简单实现登录验证给你
2019/11/06 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
党课心得体会范文
2014/09/09 职场文书
2016春节家属慰问信
2015/03/25 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL