世界上最简单，最小的滑块
当时作为一名布局设计师，我完全理解了插件的工作方式，并以好奇的心态反复探究前端，试图实现代码的最小化并优化CSS或相同布局的工作。
该滑块是在对z-index进行几次实验后诞生的，令我惊讶的是，该程序只有10行。我没有将图像转换为背景图像，而是可以滚动浏览布局块。
这是场景容器的HTML：
<figure>
<img src="./graphics/R-1.png" alt="RevolveR Labs" />
<img src="./graphics/R-2.png" alt="RevolveR Labs" />
<img src="./graphics/R-3.png" alt="RevolveR Labs" />
<img src="./graphics/R-4.png" alt="RevolveR Labs" />
</figure>
让我们添加一些CSS，这些图像会将图像标签加载到X：0和Y：0（顶部：0px和左侧：0px）的一个牌组中：
figure {
background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
box-shadow: inset 0 0 1vw #000;
outline: .2vw solid #b1917fbd;
border: .1vw dashed #999;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 36.46vw;
height: 22vw;
}
figure img {
position: absolute;
width: 36.46vw;
height: 22vw;
opacity: 1;
left: 0;
top: 0;
}
由于8K和更多显示器的出现，我不再在布局中使用诸如PX之类的静态值，而是在可伸缩视口单元上执行所有操作，这使我避免了在任何屏幕分辨率下进入媒体查询和设计界面的过程。
现在，让我们编写一个JavaScript处理程序，该处理程序将简单地在甲板上翻转，并且没有任何时间间隔的影响：
var e = document.querySelectorAll('figure img');
let i = 0;
if(e) {
void setInterval(() => {
e[i].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
e[i].style.zIndex = 1;
}, 3000);
}
我们使用setInteval在初始化时进行3秒钟的清理，并在伪循环上实现一个可重置的迭代器。在计时器的每个下一个刻度上，依次更改所需图像的z索引。先前图像的z-index永久重置为0，并且通过将z-index设置为1，当前循环元素位于最前面
。世界上最简单，最小的滑盖像卡拉什尼科夫突击步枪一样准备就绪，可靠且基本。现在整个甲板都在滴答作响，伪循环的当前元素脱颖而出。在纯JavaScript中，所有这些都无需第三方即可使用。
添加效果
转子（我叫它）太简单了，我想添加一些过渡效果。要做到这一点，您已经必须使用一个知道如何为CSS赋予动画效果的库，其中包括酷炫的缓动效果（RevolveR中有43种效果）。
这是清单：
let launch = RR.browser;
RR.allowSlide = true;
var e = RR.sel('figure img')
let i = 0;
void setInterval(
() => {
if( e && RR.allowSlide ) {
RR.animate([ e[ i ] ], ['opacity:0:800:lienar'], () => {
e[ i ].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
RR.animate([ e[ i ] ], ['opacity:.8:800:swingTo'], () => {
e[ i ].style.zIndex = 1;
});
});
}
},
3000);
在这里，实现了一个回调序列来完成动画的状态，该状态在总时间上适合于setInterval计时器类型，并且随着淡入淡出和闪烁，我们得到了很酷的过渡。
一切都很好，但是当指针在舞台上时，我们还可以通过翻转标志来增加延迟：
RR.event('figure img', 'mouseenter', () => {
RR.allowSlide = null;
RR.event('figure img', 'mouseleave', () => {
RR.allowSlide = true;
});
});
RevolveR Labs的实际转子
在此处查看运行中的转子。
如您所见，这里也没有太多代码，可以实现更复杂和有趣的效果。但这取决于您。