首页
所有分类
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创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
关于使用js算总价的问题
Jun 23 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
小程序实现背景音乐播放和暂停
Jun 19 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
爬虫(2) Counter(1) Xpath(1) MIME(1) pip(1) LOGO(1) 字典(3) 并发(8) most_common(1) 抖音(1)
You might like
简单的php 验证图片生成函数
2009/05/21 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
如何使用纯PHP实现定时器任务（Timer）
2015/07/31 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
python中遍历文件的3个方法
2014/09/02 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
Python实现二维数组输出为图片
2018/04/03 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
YUV转为jpg图像的实现
2019/12/09 Python
python 爬取疫情数据的源码
2020/02/09 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
Waterford美国官网：爱尔兰水晶制品品牌
2017/04/26 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
市场营销管理制度
2014/01/29 职场文书
大学学风建设方案
2014/05/04 职场文书
搞笑车尾标语
2014/06/23 职场文书
员工工作表扬信
2015/05/05 职场文书
重温经典：乔布斯在斯坦福大学的毕业演讲（双语）
2019/08/26 职场文书