作者已经发布了
轮播脚本，该脚本也仅使用CSS和Javascript。 现在，让我们看一下滑块脚本。 它与轮播的不同之处在于，一次只能看到一个元素，而看不到多个元素，并且这些元素不会滚动，但会彼此缓慢地替换。 还有更多。 在此滑块中，仅将图像（幻灯片）用作元素，因此称为简单图像滑块。
通过箭头“下一个元素”或“上一个元素”和指示点进行导航。 可以在脚本设置中禁用箭头和点。 可以在第一个元素和最后一个元素处停止显示元素，也可以在最后一个元素后跟第一个元素时以循环显示。 您可以启用元素的自动查看（滚动），查看的持续时间（切换之间的间隔）是可调的。 当您将鼠标悬停在某个项目上时，滚动停止。
滑块会自动调整为任何设备的任何屏幕宽度。 您可以通过向左或向右移动浏览器的一侧来进行验证。
HTML-滑条代码是标准的，唯一的例外是：在图像前面放置一个屏幕，这是一张纯白色的图片。 所有图像和屏幕的尺寸均应相同。 图像数量是任意的。
<div class="sim-slider"> <ul class="sim-slider-list"> <li><img src="screen.gif" alt="screen"></li> <li class="sim-slider-element"><img src="img1.jpg" alt="1"></li> <li class="sim-slider-element"><img src="img2.jpg" alt="2"></li> … <li class="sim-slider-element"><img src="imgN.jpg" alt="N"></li> </ul> <div class="sim-slider-arrow-left"></div> <div class="sim-slider-arrow-right"></div> <div class="sim-slider-dots"></div> </div>
<ul> <li>标记用作容器，但是可以使用<div> <div>或<div> <p>。 箭头和指示点绝对位于相应的容器中。 对于箭头，使用三角括号形式的图案，如果需要，可以将其替换为自己的图案。 点是由程序生成的，点的数量等于图像的数量。
所有图像都堆叠在一起，一个叠放在另一个上，并且绝对位于封闭容器的左上角。 筛网防止外部容器倒塌。 除初始化程序为其分配不透明度的第一个元素：1之外，所有图像均被分配CSS属性opacity：0，从而使其可见。
滚动元素是通过将不可见性从1平滑更改为0，将下一个不可见元素从0平滑更改为1来执行的。 因此，可见元素变为不可见，而不可见可见。 过渡平滑度创建一个持续时间为1s的过渡属性和一个缓入过渡函数。
的CSS img { width: 100%; !important; } .sim-slider { position: relative; } .sim-slider-list { margin: 0; padding: 0; list-style-type: none; position: relative; } .sim-slider-element { width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; } div.sim-slider-arrow-left, div.sim-slider-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; } div.sim-slider-arrow-left { left: 10px; top: 40%; display: block; background: url("sim-arrow-left.png") no-repeat; } div.sim-slider-arrow-right { right: 10px; top: 40%; display: block; background: url("sim-arrow-right.png") no-repeat; } div.sim-slider-arrow-left:hover { opacity: 1.0; } div.sim-slider-arrow-right:hover { opacity: 1.0; } div.sim-slider-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; } span.sim-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }
为了使滑块适应任何屏幕宽度，对于图像，您需要指定CSS属性宽度：100％。 对于所有块容器（div，ul，li等），宽度也是：100％，或者，如果需要以数字为单位的宽度，则只能是max-width或min-width。
与往常一样，样式包含在标题中。 该脚本可以在onload事件或HTML标记的末尾连接。 滑块脚本文件可能如下所示：
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Simple slider</title> <link rel="stylesheet" type="text/css" href="sim-slider-styles.css"> </head> <body> … <div class="sim-slider"> … </div> … <footer> … </footer> <script src="sim-slider.js"></script> <script>new Sim()</script> </body> </html>
滑块通过sim-slider类的名称或标识符来调用。 在第二种情况下，您可以在一页上放置多个滑块。
<div class="sim-slider" id="first"> … <div class="sim-slider" id="second"> … <script>new Sim("first"); new Sim("second");</script>
Java脚本 function Sim(sldrId) { let id = document.getElementById(sldrId); if(id) { this.sldrRoot = id } else { this.sldrRoot = document.querySelector('.sim-slider') };
所有图像均来自开源。感谢您的关注！