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

JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)

Posted in Javascript onSeptember 23, 2016

**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)

**实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，

**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，

**因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
</head>
<body>
 <img src="link.gif" style="cursor: pointer" onmouseover="clearright();toleft()" />
 <img src="link1.gif" style="cursor: pointer" onmouseover="clearleft();toright()" />
 <div>
  <div id="demo" style="overflow: hidden; width: 322px; height: 61px">
   <table cellpadding="0" align="left" border="0" cellspace="0">
    <tbody>
     <tr>
      <td id="demo1" valign="top">
       <table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
        <tbody>
         <tr align="center">
          <td width="50" height="50">
           <img height="50" src="link.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link1.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link2.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link3.gif" />
          </td>
         </tr>
        </tbody>
       </table>
      </td>
      <td id="demo2" valign="top">
      </td>
     </tr>
    </tbody>
   </table>
  </div>
 </div>
 <div>
  <div id="demo_a" style="overflow: hidden; width: 322px; height: 61px">
   <table cellpadding="0" align="left" border="0" cellspace="0">
    <tbody>
     <tr>
      <td id="demo_b" valign="top">
       <table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
        <tbody>
         <tr align="center">
          <td width="50" height="50">
           <img height="50" src="link.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link1.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link2.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link3.gif" />
          </td>
         </tr>
        </tbody>
       </table>
      </td>
      <td id="demo_c" valign="top">
      </td>
     </tr>
    </tbody>
   </table>
  </div>
 </div>
 <script type="text/javascript">
 /*
 **兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)
 **
 **实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
 **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，
 **因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
 */
 var speed1=0  //图片左移的速度
 var MyMar1  //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
 var MyMar2  //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
 var lefthit=0    //记录左移按钮点击次数
 var righthit=0  ////记录右移按钮点击次数 
 //调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用）
 function clearleft(){
   clearInterval(MyMar1)
   clearInterval(MyMar2)
 }
 //图片左移的方法
 function toleft(){
    //判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0）
   if(lefthit==0){
     speed1=30;//图片左移速度时间毫秒
     //让的内容demo2与demo1内容一样
     document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
     //上行图片移动的方法
     function Marquee1(){
        //当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等
       if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){
         //demo跳回初始位置
         document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
       }
       else{
         //demo开始重新移动
         document.getElementById("demo").scrollLeft++
       }
     }
     //setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID
     MyMar1=setInterval(Marquee1,speed1)
     //当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止
     document.getElementById("demo").onmouseover=function()
     {clearInterval(MyMar1);clearInterval(MyMar2)}
     //当鼠标移除demo时,重新setInterval让方法执行，这样图片会继续移动
     document.getElementById("demo").onmouseout=function()
     {MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)}
      //下面的方法与上面的方法一样，用于第二行的图片向左移动
      document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
     function Marquee2(){
       if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft<=0){
         document.getElementById("demo_a").scrollLeft-=document.getElementById("demo_b").offsetWidth}
       else{
         document.getElementById("demo_a").scrollLeft++
       }
     }
     MyMar2=setInterval(Marquee2,speed1)
     document.getElementById("demo_a").onmouseover=function()
     {clearInterval(MyMar2);clearInterval(MyMar1)}
     document.getElementById("demo_a").onmouseout=function()
     {MyMar2=setInterval(Marquee2,speed1); document.getElementById("demo").onmouseout()}
     lefthit=1    //设置左移按钮，当按了一次左移后(不管按多少次)，在没按右移按钮之前，toleft方法里的的代码不会再被执行
     righthit=0  //把右移按钮设为0,这样当下次点了右移按钮的时候，以便toright方法被调用
   }
 }
 
 
 var MyMar3  //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
 var MyMar4  //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
 var speed2=0  //图片右移的速度
 //调用移左方法前,先让右移停止（clearInterval清除setInterval对方法的调用）
 function clearright(){
   clearInterval(MyMar3)
   clearInterval(MyMar4)
 }
 
 
 //图片右移方法(与图片左移方法思路一样)
 function toright(){
     //判断是否是第一次按下右移按钮（图片往右开始移动的时候，不会在调用此方法。只有当按了左移按钮时，才会把righthit重设为0）
   if(righthit==0){
     speed2=30;
     document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
     function Marquee_a(){
       if(document.getElementById("demo").scrollLeft<=0){
         document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth
       }
       else{
         document.getElementById("demo").scrollLeft--
       }
     }
     MyMar3=setInterval(Marquee_a,speed2)
     document.getElementById("demo").onmouseover=function()
     {clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()}
     document.getElementById("demo").onmouseout=function()
     {MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}
    
     
     document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
     function Marquee_b(){
       if(document.getElementById("demo_a").scrollLeft<=0){
         document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth
       }
       else{
         document.getElementById("demo_a").scrollLeft--
       }
     }
     MyMar4=setInterval(Marquee_b,speed2)
     document.getElementById("demo_a").onmouseover=function()
     {clearInterval(MyMar4);clearInterval(MyMar3)}
     document.getElementById("demo_a").onmouseout=function()
     {MyMar4=setInterval(Marquee_b,speed2);document.getElementById("demo").onmouseout()}
     righthit=1  //设置右移按钮，当按了一次右移按钮后(不管按多少次)，在没按左移按钮之前，toright方法里的的代码不会再被执行
     lefthit=0  //把左移按钮设为0,这样当下次点了左移按钮的时候，以便toleft方法被调用
   }
 }
 </script>
</body>
</html>

以上就是小编为大家带来的JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)的全部内容了，希望对大家有所帮助，多多支持三水点靠木~

JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)

- Author -

jingxian

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

Javascript 相关文章推荐
js中的string.format函数代码
Aug 11 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 #Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 #Javascript
值得分享的bootstrap table实例
Sep 22 #Javascript
第一次动手实现bootstrap table分页效果
Sep 22 #Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 #Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 #Javascript
JavaScript面试题大全(推荐)
Sep 22 #Javascript
GTX1660(1) 对讲机(1) React(6) R71E(1) R72E(1) 胆机(1) DE1102(1) WR-800F(1) ICOM(2) R9700(1)
You might like
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jQuery中$this和$(this)的区别介绍（一看就懂）
2015/07/06 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
实例浅析js的this
2016/12/11 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
vue实现动态数据绑定
2017/04/28 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
js实现一个简易计算器
2020/03/30 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
Python Pandas 如何shuffle（打乱）数据
2019/07/30 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
公司综合部的成员自我评价分享
2013/11/05 职场文书
历史学专业推荐信
2013/11/06 职场文书
syb养殖创业计划书
2014/01/09 职场文书
总会计师岗位职责
2014/02/19 职场文书
生活部的活动方案
2014/08/19 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
出生证明格式
2015/06/15 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python