首页
所有分类
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 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
JS实现留言板功能
Jun 17 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
Angular简单验证功能示例
Dec 22 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
使用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
对撞机(1) 酶(1) 天问一号(1) 粒子对撞机(1) 国际空间站(1) 人造肉(1) 界面设计(1) 塑料(1) 太空(1) 夸克(1)
You might like
PHP中的CMS的涵义
2007/03/11 PHP
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
js 倒计时（高效率服务器时间同步）
2017/09/12 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python避免死锁方法实例分析
2015/06/04 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Apache如何部署django项目
2017/05/21 Python
python中的print()输出
2019/04/12 Python
基于matplotlib xticks用法详解
2020/04/16 Python
利用python3筛选excel中特定的行（行值满足某个条件/行值属于某个集合）
2020/09/04 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
兰蔻法国官方网站：Lancôme法国
2020/02/22 全球购物
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
运动会口号大全
2014/06/07 职场文书
技术股东合作协议书
2014/12/02 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
python编程实现清理微信重复缓存文件
2021/11/01 Python