原生JS实现无缝轮播图

1.html

DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>无缝轮播图title>
    <link rel="stylesheet" href="./index.css" />
  head>
  <body>
    <div class="carousel-container">
      <div class="carousel-list">
        <div class="carousel-item">
          <a href="#"><img src="./images/1.jpg" alt="" />a>
        div>
        <div class="carousel-item">
          <a href="#"><img src="./images/2.jpg" alt="" />a>
        div>
        <div class="carousel-item">
          <a href="#"><img src="./images/3.jpg" alt="" />a>
        div>
      div>
      <div class="indicator">
        <span class="active">span>
        <span>span>
        <span>span>
      div>
      <div class="arrow-left"><div>
      <div class="arrow-right">>div>
    div>
    <script src="./index.js">script>
  body>
html>
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

2.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 外层容器 */
.carousel-container {
  width: 500px;
  height: 300px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  outline: 5px solid;
}
/* 走马灯容器 */
.carousel-container .carousel-list {
  width: 100%;
  height: 100%;
  display: flex;
  transition: all 0.5s;
}

.carousel-container .carousel-list img {
  width: 500px;
  height: 300px;
  object-fit: cover;
}

/* 指示器 */
.indicator {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.indicator span {
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  margin: 0 3px;
  cursor: pointer;
}

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

.arrow-left {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: #000;
  color: #fff;
  opacity: 0.4;
  font-size: 26px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  user-select: none;
  transition: 0.5s;
  border-radius: 50%;
}

.arrow-right {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: #000;
  color: #fff;
  opacity: 0.4;
  font-size: 26px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  user-select: none;
  transition: 0.5s;
  border-radius: 50%;
}

.arrow-left:hover,
.arrow-right:hover {
  opacity: 0.7;
}
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

3.js

// 获取doms
const doms = {
  arrowLeft: document.querySelector(".arrow-left"),
  arrowRight: document.querySelector(".arrow-right"),
  carousel: document.querySelector(".carousel-list"),
  indicators: document.querySelectorAll(".indicator span"),
};
let curIndex = 0; // 记录目前是第几张
/**
 *
 * @param {number} index
 */
function moveTo(index) {
  doms.carousel.style.transform = `translateX(-${index}00%)`;
  // 控制指示器
  // 获取当前激活的指示器
  const active = document.querySelector(".indicator span.active");
  // 去除当前选中的指示器
  active.classList.remove("active");
  // 重新设置要选中的指示器
  doms.indicators[index].classList.add("active");
  curIndex = index;
}

doms.indicators.forEach(function (item, i) {
  item.onclick = function () {
    moveTo(i);
  };
});

// 复制第一张图片，放到末尾，再复制最后一张图片放到第一个

function init() {
  // 复制第一张图
  const first = doms.carousel.firstElementChild.cloneNode(true);
  // 复制最后一张图
  const last = doms.carousel.lastElementChild.cloneNode(true);
  // 将第一张图放到末尾
  doms.carousel.appendChild(first);
  // 将最后一张图放到第一张
  doms.carousel.insertBefore(last, doms.carousel.firstElementChild);
  // 设置最后一张复制的图片为绝对定位
  last.style.position = "absolute";
  last.style.transform = "translateX(-100%)";
}

init();

let count = doms.indicators.length;

// 点击右箭头
doms.arrowRight.addEventListener("click", rightNext);
doms.arrowLeft.addEventListener("click", leftNext);

function leftNext() {
  if (curIndex === 0) {
    // 无缝 - 以迅雷不及掩耳之势把他移动到第一张，用户感知不到
    doms.carousel.style.transform = `translateX(-${count}00%)`;
    doms.carousel.style.transition = "none";
    // 强制渲染 - 读取元素的位置、尺寸
    doms.carousel.clientHeight;
    // 然后再移动到下一张
    doms.carousel.style.transition = "all 0.5s";
    moveTo(count - 1);
  } else {
    moveTo(curIndex - 1);
  }
}

function rightNext() {
  if (curIndex === count - 1) {
    // 无缝 - 以迅雷不及掩耳之势把他移动到第一张，用户感知不到
    doms.carousel.style.transform = "translateX(100%)";
    doms.carousel.style.transition = "none";
    // 强制渲染 - 读取元素的位置、尺寸
    doms.carousel.clientHeight;
    // 然后再移动到下一张
    doms.carousel.style.transition = "all 0.5s";
    moveTo(0);
  } else {
    moveTo(curIndex + 1);
  }
}

let timer = setInterval(rightNext, 3000);

doms.carousel.addEventListener("mouseenter", function () {
  clearInterval(timer);
});
doms.carousel.addEventListener("mouseleave", function () {
  timer = setInterval(rightNext, 3000);
});
Ï
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

在这里插入图片描述

相关阅读:
Android grantUriPermission的使用场景和方式
 制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
uni-app生命周期详解
 unity 跨屏显示
 华为OD机试 - 智能驾驶 - 广度优先搜索（Java 2024 C卷 200分）
centos7修改root用户密码
 ElasticSearch - 基于 docker 部署 es、kibana，配置中文分词器、扩展词词典、停用词词典
 电商3D资产优化管线的自动化
 (附源码)计算机毕业设计ssmJAVA高校田径运动会管理
 软考高级系统架构设计师系列论文十八：论软件三层结构的设计
原文地址：https://blog.csdn.net/m0_46219714/article/details/133177935