JavaScript实现京东首页幻灯片切换效果

京东首页的幻灯片切换效果，挺经典的一套交互动效。用原生 JS 来撸，其实没你想的那么复杂。主要是三件事：HTML 结构定好，CSS 搞个层叠样式，再用 JS 控制谁显示谁隐藏。

结构上就用一个.slider包几个.slide，每张图一个div，不用花里胡哨。

样式方面，只让当前的 slide 可见，其他都用opacity: 0搞掉，再加点transition过渡，切起来顺滑点，看着舒服。

JS 部分是关键，定时切换+手动控制都安排上。比如你用setInterval三秒换一张，再监听左右按钮点事件，手动切也不卡。

整个逻辑不绕，currentIndex控制当前是哪张，切之前先.remove('active')，切完.add('active')，就这么简单粗暴。

你要是想花活多一点，也可以加指示点、键盘切换、响应式布局啥的。想偷懒？有现成的库，比如superslide也挺好使。

反正呢，这套 JS 写法蛮适合做商城首页、广告轮播、头图展示这些场景。代码量小，改起来也快。

如果你项目里也想搞点动效，可以试试照这个套路来一遍，先自己实现，后续想用框架接上 Vue 或 React 也不难。