JS：轮播图定时版

最新推荐文章于 2025-04-28 16:38:57 发布

原创

最新推荐文章于 2025-04-28 16:38:57 发布 · 564 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #css3

需求：图片能在设定的时间内连续循环播放

注意：图片可以自己找，

分析：

1、需要获取元素

2、设置定时器

3、利用一个变量获取对象数组里的属性值

5、小圆点的样式需要先删掉，再给当前的li添加active类

4、在i++的后面设置判断，如果一轮播完再无缝衔接开启下一轮

已给出HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18p