首页
所有分类
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 相关文章推荐
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
详解vue与后端数据交互(ajax)：vue-resource
Mar 16 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 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
RabbitMQ(3) Vmware(3) Geospatial(1) 触发器(3) 数据类型(8) IOC(3) Bean(3) 入门基础(1) Hash(1) XML(1)
You might like
php 代码优化的42条建议 推荐
2009/09/25 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
用C/C++来实现 Node.js 的模块（二）
2014/09/24 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
Vue实现简易计算器
2020/02/25 Javascript
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
基于Python的关键字监控及告警
2017/07/06 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
红旗团支部事迹材料
2014/01/27 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书