前言：轮播图不只是花里胡哨的装饰

每当我们打开电商站点，第一眼往往会被那几张自动切换的海报抢走注意力。其实这背后并没有神秘的插件，只要掌握浏览器提供的Web API，就Neng用Zui原始的方式把图片切来切去，还Neng随时玩转属性、事件、动画。

下面这段代码是我们今天的起点。把它粘贴到任意页面里你会kan到一个空壳子，等待我们喂食图片。

这里有三个关键点：

#slideImg唯一标识，用来随时抓取并 src。

.dots span每个小圆点对应一张图片，通过自定义属性 data-index 保存索引。

外层容器设定宽高并隐藏溢出，让图片只在视窗内出现。

别急着写 JavaScript，先给它加点「颜值」。下面的样式让轮播在切换时拥有淡入淡出的效果，并且把指示器居中放置。

/* 容器 */
.carousel {position:relative;width:720px;height:420px;overflow:hidden;background:#222}
/* 图片 */
#slideImg {width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .4s}
/* 指示器 */
.dots {position:absolute;bottom:15px;left:50%;transform:translateX}
.dots span {display:inline-block;width:12px;height:12px;margin-right:8px;background:#fff;border-radius:50%;opacity:.5}
.dots .active {background:#ff4d4f;opacity:1}

温馨提示：Ru果你想让轮播在移动端也保持比例，只需要把宽度改成百分比或者使用 CSS Grid / Flex 布局即可。

给指示器加上阴影或者 hover 时放大一点儿，会让用户感觉「我被关注了」——这可是提升转化率的微小助力哦！比如：

.dots span:hover {transform scale;box-shadow 0 0 6px rgba;}

现在该轮到 JavaScript 出场了。我们要完成三件事：

维护当前展示的索引。

根据索引geng换图片路径以及对应指示器状态。

绑定点击事件，让用户手动挑选。

以下代码展示了Zui简洁却完整的实现思路：

// 图片集合
const pics = ;
// 拿到 DOM 节点
const imgEl = document.getElementById;
const dotEls = document.querySelectorAll;
// 当前所在位置
let curIdx = 0;
/**
 * 切换函数
 */
function switchSlide {
    // 改 src
    imgEl.src = pics;
    // geng新指示器类名
    dotEls.forEach);
    dotEls.classList.add;
}
/**
 * 手动点击指示器时触发
 */
dotEls.forEach => {
    dot.addEventListener=>{
        curIdx = i;
        switchSlide;
        // 重置计时器防止立刻跳到下一张
        resetTimer;
    });
});
/**
 * 自动播放，每 3 秒循环一次
 */
let timer = setInterval=> {
    curIdx =  % pics.length;
    switchSlide;
},3000);
/**
 * 鼠标悬停暂停，离开继续
 */
document.querySelector.addEventListener=>clearInterval);
document.querySelector.addEventListener;
/**
 * 重启计时器的封装函数
 */
function resetTimer{
    clearInterval;
    timer = setInterval=> {
        curIdx =  % pics.length;
        switchSlide;
   },3000);
}

为什么要用 classList? 相比直接 .className, 它Ke以精准增删单个类，不会误伤其他样式。 同理，用 .src/.setAttribute Neng即时刷新图片，而不必重新渲染整个节点。

data-index: 用来保存每个圆点对应的序号，读取方式是 d.dataset.index.

alt 文本: 每张图片Zui好配上描述文字，这对 SEO 与屏幕阅读器dou至关重要。

键盘交互: 为容器添加 , 并监听左右键，实现无障碍切换。

// 当窗口宽度小于 500 像素时自动改为竖向布局
function adaptLayout{
   if{
       document.querySelector.style.height='250px';
   }else{
       document.querySelector.style.height='420px';
   }
}
window.addEventListener;
adaptLayout; // 初始调用一次

const observer = new IntersectionObserver=> {
   entries.forEach(entry => {
       if{
           const idx = entry.target.dataset.index;
           entry.target.src = pics; // 真正加载图像
           observer.unobserve;
       }
   });
});
document.querySelectorAll.forEach);