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 相关文章推荐
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
JS实现一个简单的日历
Feb 22 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
vuex存储token示例
Nov 11 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
使用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
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
js的with语句使用方法
2007/09/21 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
javascript数组去重小结
2016/03/07 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
详解在vue-cli中使用路由
2017/09/25 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python3获取url文件大小示例代码
2019/09/18 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
和解协议书
2014/04/16 职场文书
中国世界遗产导游词
2015/02/13 职场文书
小学体育课教学反思
2016/02/16 职场文书
《失物招领》教学反思
2016/02/20 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers