定时器应用：图片滚动

分享一下最近学习的 JavaScript 定时器实现图片的无缝滚动。

间隔型定时器

setInterval()与 clearInterval()

1
2
var timer = setInterval(func, delay); //第一个参数为定时器要执行的函数，第二个参数为定时器间隔，单位ms
clearInterval(timer); //停止定时器，参数为setInterval()所启动的定时器

原理和方法

  • 让 ul 一直向左移动 –> 减少 left 值 –> offsetLeft

    1
    oUl.style.left=oUl.offsetLeft-1+'px';

  • 复制 li

    我们演示的是 div 宽度可以容纳 4 张图片，而一共有 4 张图，所以我们要把 4 张图复制一份并接到后面

    • innerHTML

      1
      oUl.innerHTML += oUl.innerHTML;

    • 修改 ul 的 width

      原先的 ul 宽度足以容纳内容，所以需要重新调整否则图片将分两行显示

      1
      oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

  • 过界重设位置

    当 ul 走完半程即第一份的 4 张图全部走出容器时，重设 ul 位置，回到起点，即可实现无缝滚动

    判断:

    1
    2
    3
    if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
      oUl.style.left = '0';
    }

图片演示

  1. 此图为初始结构示意

    外层为 div 容器，内部为 ul 图片列表，4 张图片，则设置 div 宽度等于图片宽度*4

    1

  2. 如图，当 ul 向左移动后右侧没有内容进行显示，故我们进行复制 li 操作

    （外层容器 div 设置 overflow:hidden;属性，已经走出 div 范围的部分不会显示）

    2

  3. 复制 li 后再进行移动则会产生如图所示效果（两侧超出内容隐藏）

    3

  4. 当 ul 走完一半宽度（如图），此时显示内容原始内容相同，故我们重设 ul 位置，在视觉上实现无缝滚动

    4

  5. 重设 ul 位置，回到初始状态

    5

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>图片滚动</title>
    <style>
      #div1 {
        position: relative;
        width: 1200px;
        height: 437px;
        margin: 100px auto;
        overflow: hidden;
        border-radius: 15px;
      }
      .pic-list {
        position: absolute;
        left: 0;
        top: 0;
      }
      .pic-list li {
        float: left;
        width: 300px;
        height: 437px;
        list-style: none;
      }
      .pic-list img {
        width: 300px;
        height: 437px;
      }
    </style>
    <script>
      window.onload = function () {
        var oDiv = document.getElementById('div1');
        var oUl = oDiv.getElementsByClassName('pic-list');
        var aLi = oUl.getElementsByTagName('li');

        oUl.innerHTML += oUl.innerHTML; //将图片列表复制一份接到后面，长度必须大于等于div一次可显示长度
        oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; //重新设置ul宽度=一个li宽度*li个数

        //图片滚动函数
        function move() {
          //if条件判断作用：
          //当ul走完一半的时候重新回到原点，即可实现无缝滚动
          if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
            oUl.style.left = '0';
          }
          oUl.style.left = oUl.offsetLeft - 1 + 'px'; //每单位时间往左移动1px
        }

        var timer = setInterval(move, 30); //设置定时器，间隔30ms

        oDiv.onmouseover = function () {
          //鼠标移入停止滚动
          clearInterval(timer);
        };

        oDiv.onmouseout = function () {
          //鼠标移出开始滚动
          timer = setInterval(move, 30);
        };
      };
    </script>
  </head>
  <body>
    <div id="div1">
      <ul class="pic-list">
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
        <li><img src="img/4.jpg" /></li>
      </ul>
    </div>
  </body>
</html>

小结

这是之前学习的利用原生 JS 定时器制作图片滚动效果，比较基础，做一下记录总结

初学前端，小白一枚，有问题还望指正

欢迎志同道合的小伙伴与我交流 o(￣ ▽ ￣)ブ