首页
所有分类
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 相关文章推荐
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
js中的json对象详细介绍
Oct 29 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
实例讲解React 组件生命周期
Jul 08 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
win7(2) svg(1) 滚动条(1) 声卡驱动(1) 鸿蒙(2) 输入法(2) Debian(1) 鸿蒙3.0(1) Sunmao(1) 蓝屏(1)
You might like
怎么使 Mysql 数据同步
2006/10/09 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
微信上传视频文件提示（推荐）
2018/11/22 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
Hotels.com拉丁美洲：从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
师说教学反思
2014/02/07 职场文书
2014年创卫实施方案
2014/02/18 职场文书
少年闰土教学反思
2014/02/22 职场文书
《秋游》教学反思
2014/04/24 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
2016大一新生军训感言
2015/12/08 职场文书
员工升职自我评价
2019/03/26 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
APP界面设计技巧和注意事项
2022/04/29 杂记