html

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport"
  6.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>跑马灯</title>
  9.   <style>
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  14.     ul, li {
  15.       list-style: none;
  16.     }
  17.     .box {
  18.       margin: 40px auto;
  19.       width: 800px;
  20.       height: 200px;
  21.       border: 1px dashed #00b38a;
  22.       overflow: hidden;
  23.     }
  24.     .box ul {
  25.       height: 200px;
  26.     }
  27.     .box ul li {
  28.       float: left;
  29.       width: 200px;
  30.       height: 200px;
  31.     }
  32.     .box ul li img { /*一般设置图片的时候都是给图片包一个块元素，然后设置块元素的宽高，让里面的图片
  33.       宽高都是100%*/
  34.       width: 100%;
  35.       height: 100%;
  36.     }
  37.     .clearfix:after {
  38.       display: block;
  39.       content: '';
  40.       height: 0;
  41.       visibility: hidden;
  42.       clear: both;
  43.     }
  44.   </style>
  45. </head>
  46. <body>
  47. <div class="box" id="box">
  48.   <ul class="ulBox clearfix" id="ulBox">
  49.     <li><img src="img/1.jpg" alt=""></li>
  50.     <li><img src="img/2.jpg" alt=""></li>
  51.     <li><img src="img/3.jpg" alt=""></li>
  52.     <li><img src="img/4.jpg" alt=""></li>
  53.   </ul>
  54. </div>
  56. <script src="1-跑马灯.js"></script>
  57. </body>
  58. </html>

js

  1. // 1. 获取元素
  2. let box = document.querySelector('#box');
  3. // console.log(box);
  5. // 2. 复制一份li
  6. let ulBox = document.querySelector('#ulBox');
  7. ulBox.innerHTML += ulBox.innerHTML; // 复制一份 html，并且插入到页面中
  9. // 3. 为了让这些图片在一行，重新调整 ul 的宽度
  10. ulBox.style.width = '1600px'; // 有单位 px
  12. // 4. 滚动起来
  13. let timer = setInterval(() => {
  14.   box.scrollLeft += 1;
  15.   if (box.scrollLeft >= 800) {
  16.     box.scrollLeft = 0;
  17.   }
  18. }, 16);
  20. // 当浏览器窗口处于最小化时，浏览器中定时器计时可能会出现问题。是因为最小化的过程中，浏览器进入了节能的状态，计算会出现偏差。
  21. // 切换页卡也可能会导致这种情况；
  23. // webWorker 可以启动另一个线程，某些情况下可以用这个解决这些问题；

图片素材

1.jpg2.jpg3.jpg4.jpg