JavaScript基于定时器怎么实现图片无缝滚动功能

蜗牛互联网技术资讯 2022-05-06 237 0

本文小编为大家详细介绍“JavaScript基于定时器怎么实现图片无缝滚动功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript基于定时器怎么实现图片无缝滚动功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

一、无缝滚动理论基础

基础知识

1.setInterval（function，time）、clearInterval（timer）

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

2.offsetLeft与style.left的区别

offsetLeft 获取的是相对于父对象的左边距

left 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距

如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，

这同offsetLeft是相同的，区别在于：

1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。
2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。
3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在css里，style.left的值仍然为空，这就是我刚开始碰到的问题，总是取不到style.left的值。

offsetLeft则仍然能够取到，无需事先定义div的位置。

二、代码片段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无缝滚动</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #div2{
      width: 400px;
      margin: 100px auto;
    }
    input{
      margin:0 auto;
      text-align: center;
      margin-left: 80px;
      font-size: 40px;
    }
    #div1{
      width: 712px;
      height: 108px;
      margin: 100px auto;
      position: relative;
      background-color: red;
      overflow: hidden;
    }
    #div1 ul{
      position: absolute;
      left: 0;
      top: 0;
    }
    #div1 ul li{
      float: left;
      width: 178px;
      height: 108px;
      list-style:none;
    }
  </style>
  <script>
    window.onload=function(){
      var oDiv=document.getElementById('div1');
      var oUl=document.getElementsByTagName('ul')[0];
      var aLi=oUl.getElementsByTagName('li');
      var lBtn=document.getElementById('lbtn');
      var rBtn=document.getElementById('rbtn');
      //将ul复制一份相加复制给ul（这样ul相当于有8张图片）
      oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
      oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
      //speed控制图片移动方向和速度
      var speed=2;
      function move(){
        if(oUl.offsetLeft<-oUl.offsetWidth/2){
          oUl.style.left=0;
        }
        if(oUl.offsetLeft>0)
        {
          oUl.style.left=-oUl.offsetWidth/2+'px';
        }
        oUl.style.left=oUl.offsetLeft+speed+'px';
      }
      var timer=setInterval(move,30);
      // 鼠标移进时，图片停止运动
      oDiv.onmouseover=function(){
        clearInterval(timer);
      };
      //鼠标移出时，图片继续移动
      oDiv.onmouseout=function(){
      timer=setInterval(move,30);
      }
      //按钮控制移动方向
      lBtn.onclick= function () {
        speed=-2;
      }
      rBtn.onclick=function(){
        speed=2;
      }
    };
  </script>
</head>
<body>
<div id="div2" >
  <input type="button" value="向左" id="lbtn"/>
  <input type="button" value="向右" id="rbtn"/>
</div>
  <div id="div1">
    <ul>
      <li><img src="images/1.jpg" /></li>
      <li><img src="images/2.jpg" /></li>
      <li><img src="images/3.jpg" /></li>
      <li><img src="images/4.jpg" /></li>
    </ul>
  </div>
</body>
</html>

三、效果图

JavaScript基于定时器怎么实现图片无缝滚动功能 javascript 第1张