谈谈如何使用 JavaScript 制作一个简单的轮播切换

在页面制作中，我们可以使用原生JS构建一个非常简单的轮播（或滑块）。流量主的相关知识也可以到网站具体了解一下，有专业的客服人员为您全面解读，相信会有一个好的合作！

这种现对于基本来说是完美的，它也是一种以体面的方式显示内容的高性能方式。一旦你构建了这些幻灯片，你就可以向它们添加任何你想要的内容；文字，图像，视频，你的字。


如下图所示构建的简单的彩色轮播：

1先构建，放置左右按钮和每一屏显示的内容，如下所示：


=-


=-=-


==-:#493;S1


==-:#532;S2


==-:#6478;S3


==-:#62;S4





=-=--


=_





=-=--


=_








2设置轮播的样式，首先设置-,-和类的样式，父级-要设置:，幻灯片的-要设置:;和:，使其在一行上显示所有的轮播内容，而且:可以允许用户手动切换轮播，使其可拖动，还有一个重要属性是-，这是允许容器平滑滚动到下一张幻灯片而不是立即移动的属性。类-是设置左右切换按钮的样式。如下所示：


-{:0;:;:;}


-{0-0);:0%;:;:;-:;-:;:0;:0;}


-{:;:;:0;:0;:;:50;-:;:;:50;:0;:;:;:0;}


-:,-:{:1;}


#--{:0;}


#--{:0;}


{:0%;:0%;:0%;}


需要注意的是，如果不需要滚动条，则需要额外设置：


-{


-:;*F*


---:;*IE+*


}


*WK*


-::--{


:0;


:0;


}

使用JS添加滑块功能，滑块功能涉及两部分逻辑，分别是单击前进箭头时显示下一屏内容，单击后退箭头时显示上一屏内容，先要获取滑块的所有元素，然后将点击事件监听器添加到下一个按钮，当按钮被点击时，得到一张幻灯片的宽度值，通过增加的L属性，稍作调整就可以将相同的逻辑应用于后退箭头按钮，不过使用这种方法，不是添加到L属性中，而是减去幻灯片的宽度，这样就可以在按下后退箭头时向后移动了。

如下所示：


C=EBI(-);


=S();


B=EBI(--);


B=EBI(--);


BEL(,()={


W=W;


CL+=W;


});


BEL(,()={


W=W;


CL-=W;


});