手写简易轮播图

浮华与是非 3/31/2025 HTML,CSS

# 手写简易轮播图

# 1. 轮播图核心思路

方式有很多，一般为flex布局或者绝对定位实现，下面是flex布局实现的核心思路。容器内的图片通过flex布局排列，通过transform属性改变容器的位置，实现轮播效果。

# 2. 代码实现

# 2.1 两层容器，内部容器包含实际的图片

用div标签包裹一层容器container，再包裹一层内部容器carousel'，内部容器包含实际的图片。container容器居中，由于有原点指示器存在，加一个相对定位。carousel宽高为100%，flex布局排列，图片的宽高同container`一致，保证填满。

<div class="container">
    <div class="carousel">
        <div class="item"><a href=""><img
            src="https://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
            alt=""></a>
        </div>
        <div class="item"><a href=""><img
            src="https://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
            alt=""></a>
        </div>
        <div class="item"><a href=""><img
            src="https://gips2.baidu.com/it/u=828570294,3060139577&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
            alt=""></a>
        </div>
        <div class="item"><a href=""><img
            src="https://gips1.baidu.com/it/u=2796235956,491702987&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
            alt=""></a>
        </div>
    </div>
    <div class="indicator">
      <span class="active"></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
</div>

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

# 2.2 样式设置

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      width: 600px;
      height: 500px;
      margin: 10px auto;
      overflow: hidden;
      position: relative;
    }

    .container .carousel {
      width: 100%;
      height: 100%;
      display: flex;
      transition: 0.5s;
    }

    .container .carousel img {
      width: 600px;
      height: 500px;

    }

    .indicator {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
    }

    .indicator span {
      width: 10px;
      height: 10px;
      margin: 5px;
      border: 1px solid #ccc;
      border-radius: 50%;
    }

    .indicator span.active {
      border: 1px solid #fff;
      background-color: #fff;
    }

    .indicator span:hover {
      transform: scale(1.2);
      border: 1px solid #fff;
      background-color: #fff;
      cursor: pointer;
      transition: 0.3s;
    }
  </style>

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

# 2.3 轮播图逻辑代码

定义一个 moveTo函数，传入index参数，实现图片切换。

  <script>
    let doms = {
      carousel: document.querySelector('.carousel'),
      indicator: document.querySelector('.indicator')
    }

    function moveTo(index) {
      doms.carousel.style.transform = `translateX(${-index * 600}px)`
      // 先移除原点样式，再添加新样式
      const activeDom = document.querySelector('.indicator span.active')
      activeDom.classList.remove('active')
      doms.indicator.children[index].classList.add('active')
    }
    // 监听原点点击事件，改变图片
    doms.indicator.addEventListener('click', function (e) {
      if (e.target.tagName === 'SPAN') {
        const index = Array.from(doms.indicator.children).indexOf(e.target)
        moveTo(index)
      }
    })
  </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21