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>

转载于:https://www.cnblogs.com/xingyue1988/p/6490669.html