首页
所有分类
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 相关文章推荐
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
微信小程序使用websocket通讯的demo，含前后端代码，亲测可用
May 22 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 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
监听(2) 事件调度器(1) re模块(2) vue-router-link(1) watch(1) okenizer(1) 项目打包(2) scss(1) sched(1) vue-cli3.x(1)
You might like
单位速度在实战中的运用
2020/03/04 星际争霸
PHP4之真OO
2006/10/09 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
解决vue打包后刷新页面报错：Unexpected token
2019/08/27 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
Python的装饰器用法学习笔记
2016/06/24 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
Python 从attribute到property详解
2020/03/05 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
俄罗斯苹果优质经销商商店：iPort
2020/05/27 全球购物
MySQL面试题目集锦
2016/04/14 面试题
教学器材管理制度
2014/01/26 职场文书
篮球比赛口号
2014/06/10 职场文书
个人贷款收入证明
2014/10/26 职场文书
护士先进个人总结
2015/02/13 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
一波干货，会议主持词开场白范文
2019/05/06 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
详解Python中下划线的5种含义
2021/07/15 Python