JS实现图片无缝滚动特效；附addEventListener()方法offsetLeft和offsetWidth属性。

Posted 2020-09-02 业务高于技术

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现图片无缝滚动特效；附addEventListener()方法offsetLeft和offsetWidth属性。相关的知识，希望对你有一定的参考价值。

一：html部分

<body>
  <input id="btn1" type="button" value="向左">
  <input id="btn2" type="button" value="向右">
  <div id="div1">/*外框，显示区域*/
 
    <ul id="ul1">/*循环滚动的内容,下面js控制赋值一份相同的内容*/
      <li>111111</li>
      <li>22222</li>
      <li>33333</li>
      <li>44444</li>
    </ul>
  </div>
</body>

二：样式表内容

<style>
    *{
      margin: 0;
      padding: 0;
    }
    #div1{
      width: 640px;
      height: 120px;
      margin: 100px auto;
      background-color: #646464;
      position: relative;
      overflow: hidden;
    }
    #div1 ul{
      position:absolute;
      left:0;
      top:0;
      overflow: hidden;
      background-color: #3b7796;
    }
 
    #div1 ul li{
      float: left;
      width: 160px;
      height: 120px;
      list-style: none;
    }
  </style>

三：js部分

*定义一个速度变量speed，贯穿整个滚动过程

*把html中的滚动部分，复制一份。相当于两份一样的滚动内容

*move()方法，通过判断滚动的位置，当第一份内容的最后一副图滚动完成，就让其回复初始位置。

<script>
    window.onload = function(){
        /*1.定义滚动的内容、定义速度变量speed、定义滑动部分的宽度=图片数量*图片宽度*/
      var oDiv = document.getElementById(\'div1\');
      var oUl = document.getElementById(\'ul1\');
      oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图（2）
      var oLi= document.getElementsByTagName(\'li\');
      oUl.style.width = oLi.length*160+\'px\';//设置ul的宽度使图片可以放下
       var speed = 2;//初始化速度
       
       /*2.给左右按钮加点击事件*/
      var oBtn1 = document.getElementById(\'btn1\');
      var oBtn2 = document.getElementById(\'btn2\');
 
        var timer = setInterval(move,30);//全局变量 ，保存返回的定时器
      
 
      oBtn1.addEventListener(\'click\',function(){
        speed = -2;
      },false);
      oBtn2.addEventListener(\'click\',function(){
        speed = 2;
      },false);
 
    
       /*3.给鼠标加划入划出事件*/
      oDiv.addEventListener(\'mouseout\', function () {
        timer = setInterval(move,30);
      },false);
      oDiv.addEventListener(\'mouseover\', function () {
        clearInterval(timer);//鼠标移入清除定时器
      },false);
      
        /* 定义移动的move()方法*/
      function move(){
        if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时
          oUl.style.left = 0;
        }
 
        if(oUl.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时
          oUl.style.left = -(oUl.offsetWidth/2)+\'px\';
        }
 
        oUl.style.left = oUl.offsetLeft + speed + \'px\';
      }
      
      
    }
    
    
  </script>

以上是关于JS实现图片无缝滚动特效；附addEventListener()方法offsetLeft和offsetWidth属性。的主要内容，如果未能解决你的问题，请参考以下文章

CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）

JS-特效～ 01. 事件对象offset偏移／检测无缝滚动自动循环轮播图

wpf 一行图片无缝的滚动

JavaScript----marquee滚动标签图片无缝滚动插入百度地图

js图片滚动无缝衔接