结构

  1. <body>
  2.   <!-- 外层容器 -->
  3.   <div id="outer">
  4.     <!-- 图片列表 -->
  5.     <ul id="img-list">
  6.       <li>
  7.         <img src="./imgs/1.jpg" alt="">
  8.       </li>
  9.       <li>
  10.         <img src="./imgs/2.jpg" alt="">
  11.       </li>
  12.       <li>
  13.         <img src="./imgs/3.jpg" alt="">
  14.       </li>
  15.       <li>
  16.         <img src="./imgs/4.jpg" alt="">
  17.       </li>
  18.       <li>
  19.         <img src="./imgs/5.jpg" alt="">
  20.       </li>
  21.       <li>
  22.         <img src="./imgs/6.jpg" alt="">
  23.       </li>
  24.       <!-- 为了保证效果，在最后一张图片后添加 第一张图片 -->
  25.       <li>
  26.         <img src="./imgs/1.jpg" alt="">
  27.       </li>
  28.     </ul>
  29.   </div>
  30. </body>
  • 依次放入图片即可，需要包一个外层容器 outer
  • 在最后一张图片后，添加第一张图片，保证轮播时平滑。

样式

  1.   <style>
  2.     /* 样式重置 */
  3.     * {
  4.       padding: 0;
  5.       margin: 0;
  6.     }
  8.     li {
  9.       list-style: none;
  10.     }
  11.     /* 
  12.       外层容器样式
  13.       overflow: hidden; 裁剪多余的图片
  14.       position: relative; 开启相对定位
  15.     */
  16.     #outer {
  17.       width: 220px;
  18.       height: 200px;
  19.       margin: 0 auto;
  20.       padding: 10px 0;
  21.       background-color: wheat;
  22.       overflow: hidden;
  23.       position: relative;
  24.     }
  25.     /* 
  26.       图片大小为 200 * 200，开启浮动后，显示单张图片
  27.       开启绝对定位，通过修改 left 实现轮播
  28.     */
  29.     #img-list {
  30.       height: 200px;
  31.       position: absolute;
  32.       left: 0;
  33.     }
  34.     /* 开启浮动，横向布局 */
  35.     #img-list li {
  36.       float: left;
  37.       margin: 0 10px;
  38.     }
  39.     /* 图片默认为 baseline 对其，修改使其无间隔 */
  40.     #img-list li img {
  41.       vertical-align: bottom;
  42.     }
  43.   </style>
  • 首先进行样式重置
  • 外层容器的大小刚好是一张图片的大小。也可以加上少许padding进行区分
  • overflow: hidden;，设置多余内容进行裁剪，显示第一张图片

  • 给每个img 外层的 li开启浮动，进行横向布局。开启绝对定位（用于修改left的值进行轮播）

    交互

    1. <script>
    2.   window.onload = function () {
    3.     // 灵活设置 img-list 的宽度（图片数量不固定）
    4.     var imgs = document.getElementById("img-list");
    5.     var count = imgs.querySelectorAll("li img").length;
    6.     imgs.style.width = 220 * count + "px";
    8.     // 起始索引
    9.     var index = 0;
    10.     // 轮播
    11.     autoPlay();
    13.     // 自动播放：就是一个定时器，其中需要改变 index + 照片移动
    14.     function autoPlay() {
    15.       setInterval(function () {
    16.         index++;
    17.         index %= count;
    18.         move(imgs, "left", index * -220, 10);
    19.       }, 2000)
    20.     };
    22.     // 要执行动画的对象、要变化的属性、终止条件、变化速度
    23.     function move(obj, attr, end, speed) {
    24.       // 清除上一个定时器
    25.       clearInterval(obj.timer);
    26.       // 获取属性当前值
    27.       var cur = parseInt(getComputedStyle(obj)[attr]);
    28.       // 判断变化的方向。
    29.       if (cur > end) {
    30.         speed = -speed;
    31.       }
    32.       // 设置定时器，比如功能从 0 --> -220，每次变化 10
    33.       obj.timer = setInterval(() => {
    34.         var oldV = getComputedStyle(obj)[attr];
    35.         var newV = parseInt(oldV) + speed;
    36.         if ((newV > end && speed > 0) || (newV < end && speed < 0)) {
    37.           newV = end;
    38.           // 防止 end = 190，newV = 180 + 20 > 190 类似情况
    39.         }
    41.         obj.style[attr] = newV + 'px';
    42.         // 结束，关闭定时器
    43.         if (newV === end) {
    44.           clearInterval(obj.timer);
    45.           // 结束后，如果是最后一张。状态重置，重新改变 left
    46.           if (index >= count - 1) {
    47.             index = 0;
    48.             imgs.style.left = 0;
    49.           }
    50.         }
    51.       }, 30)
    52.     }
    53.   }
    54. </script>

  • ul 的宽度进行动态设置（图片数量不确定）

  • 定义 index 表示图片的下标索引
  • autoPlay定义自动播放，即一个定时器，定时执行的内容包括：改变index 值，改变 left 的值（通过move 函数）
  • move函数：参数列表，需要执行变化的的对象，要变化的属性，终止条件，变化的速度
    • 在此例中，依次为 ul，left，-220, -440...（图片对应left为[0,-220,-440…]），10