随着CSS3的出现，无需使用JS库（例如jQuery）即可制作动画。 CSS3过渡属性使您可以平滑地更改元素的其他属性（宽度，高度，边距，不透明度等），并将变换的时间和规律设置为参数。 我用纯Javascript提供了一个小巧但功能齐全的轮播。 小如蚂蚁，比
猫头鹰小得多。 但是具有几乎相同的功能。
蚂蚁轮播可让您：
- 显示一个或多个元素；
- 元素可以以有限或无限的带状形式显示（循环显示）；
- 自动滚动项目；
- 导航是通过箭头，指示点或翻转（对于触摸屏）进行的；
- 自动调整为任何屏幕宽度。
我们将轮播放入index.html文件中（请参见下面的示例文件）：
的HTML<div class="ant-carousel"> <div class="ant-carousel-hider"> <ul class="ant-carousel-list"> <li class="ant-carousel-element"><img src="images/img1.jpg" alt="1"> <p> 1</p> </li> <li class="ant-carousel-element"><img src=" images /img2.jpg" alt="2"> <p>2</p> </li> … <li class="ant-carousel-element"><img src=" images /imgN.jpg" alt="N"> <p> N</p> </li> </ul> </div> <div class="ant-carousel-arrow-left"></div><div class="ant-carousel-arrow-right"></div> <div class="ant-carousel-dots"></div> </div>
这里使用<ul> <li>元素，但是如果愿意，可以使用<div> <div>代替。 箭头和指示点绝对位于相应的容器中。 对于箭头，使用三角括号形式的图案，如果需要，可以将其替换为图案或使用伪元素
：before和
：after生成图像。
创建一个具有三个可见元素且元素宽度为270像素的轮播。 然后，最大轮播宽度为810像素。 我们包含CSS文件：
的CSS .ant-carousel { max-width: 810px; position: relative; } .ant-carousel-hider { overflow: hidden; } .ant-carousel-list { width: auto; margin: 0; padding: 0; list-style-type: none; display: flex; justify-content: flex-start; } .ant-carousel-element { display: block; flex: 0 0 auto; width: 270px; text-align: center; } div.ant-carousel-arrow-left, div.ant-carousel-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 2; display: block; } div.ant-carousel-arrow-left { left: -40px; top: 40%; background: url(“ant-arrow-left.png”) no-repeat; } div.ant-carousel-arrow-right { right: -40px; top: 40%; background: url(“ant-arrow-right.png”) no-repeat; } div.ant-carousel-arrow-left: hover { opacity: 1.0; } div.ant-carousel-arrow-right: hover { opacity: 1.0; } div.ant-carousel-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: -30px; z-index: 2; text-align: center; } span.ant-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }
我们将元素放置在
ant-carousel-list容器中，为其设置
display：flex属性，然后将所有元素按在
justify-content：flex-start的左边缘。
flex属性
：0 0自动将
flex-shrink设置为0（默认值为1）。 圆盘传送带元素的滚动是通过使用
transtraon属性来实现的，方法是将
左边缘的左凹痕从零平滑地更改为元素的宽度（在一个方向上），或者从元素的宽度平滑地更改为零（在另一个方向）。 对于转换（滚动）功能，
使用easy的值。
我们通过该程序。 在程序选项中，您可以配置：
- 可见元素的数量；
- 从头到尾或无限循环地观看带状形式的元素（带呈环形闭合）；
- 自动或手动滚动元素；
- 自动滚动间隔；
- 动画速度；
- 启用/禁用导航元素：箭头，指示器点，触摸翻转（对于触屏）。
程序的初始化始于以下事实：确定轮播元素的数量，将初始值分配给内部变量，将事件处理程序分配给箭头和点（如果已连接）。 如果启用了自动滚动选项，则会分配其他处理程序，当您将鼠标悬停在转盘元素上时，这些处理程序将停止滚动。 如果手指触摸屏幕的点与手指从屏幕上撕下的点之间的距离超过20个像素，并且手指触摸屏幕的总时间少于80毫秒，则会触发触摸滚动。 作者尚未对该旋转木马有很多经验，因此，给出的值可能需要澄清。 为了使滚动处理程序更可靠地操作，点之间的距离可以减少到10或15像素，触摸时间应该增加到100或120 ms。 该转盘的用户在获得一些使用经验后可以自己校正这些值。
元素的滚动算法根据是否启用循环选项而有所不同。 如果启用，则向右滚动（
elemPrev函数）时，
this.crslList元素的整行的
margin-left属性将从零减小到等于
elemWidth元素的宽度的
负值 。 同时，右侧的最后一个元素将被克隆并插入到第一个元素之前，然后删除最后一个元素。 该行分配了属性
'transition：margin'+ options.speed +'ms ease' ，其中
options.speed是动画速度，
easy是动画功能。 现在您可以滚动了。
左边距属性从负值平滑变为零，整个标尺平滑地向右移动，最后一项排在第一位。 在
options.speed微秒后，该行被赋予先前的值
'transition：none' 。
var elm, buf, this$ = this; elm = this.crslList.lastElementChild; buf = elm.cloneNode(true); this.crslList.insertBefore(buf, this.crslList.firstElementChild); this.crslList.removeChild(elm); this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; window.getComputedStyle(this.crslList). marginLeft; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '0px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;' }, this.options.speed);
如果您需要同时滚动n个元素，则元素的排列将循环执行n次，并且
左边界距将增加n次。
向左滚动（
elemNext函数）以相反的顺序发生。 首先，将
'transition：margin'+ options.speed +'ms ease'属性分配给
this.crslList行，并将该行平滑滚动到左侧（
crslList.style.marginLeft ='-'+ elemWidth +'px' ）。 此外，在
options.speed微秒后，将克隆第一个元素并将其插入标尺的末尾，然后删除第一个元素。 标尺返回值“ transition：none”。 如果您需要同时滚动n个元素，则与前面的情况一样，元素的重新排列将循环执行n次，并且
左边距距离增加n次。
var elm, buf, this$ = this; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;'; elm = this$.crslList.firstElementChild; buf = elm.cloneNode(true); this$.crslList.appendChild(buf); this$.crslList.removeChild(elm) this$.crslList.style.marginLeft = '0px' }, this.options.speed);
如果禁用了循环选项，则在这种情况下不会对元素进行任何排列，并且整个元素行将整体向左或向右移动到其极限点。 即使轮播已初始化且不再删除，
也会分配
this.crslList属性
'transition：margin'+ options.speed +'ms ease'元素行。
轮播通过ant-carousel类的名称或标识符来调用。 在第二种情况下，您可以在一页上放置多个轮播。 轮播index.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>Ant-Carousel</title> <link rel="stylesheet" type="text/css" href="ant-files/ant-carousel-styles.css"> </head> <body> … <div class="ant-carousel"> … </div> … <footer> … </footer> <script src="ant-files/ant-carousel. js"></script> <script>new Ant()</script> </body> </html>
要将多个轮播放置在一页上，您需要通过ID进行调用。 不同的轮播可能具有不同数量的元素。
<div class="ant-carousel" id=”first”> … <div class="ant-carousel" id=”second”> … <script>new Ant("first"); new Ant("second");</script>
所有图像均来自开源。感谢您的关注！