怎么用 JavaScript 制作一个简单的轮播切换

在页面制作中，大家可以用原生 Javascript 构建一个很简单的轮播（或滑块）。这种达成对于基本网站来讲是完美的，它也是一种以体面的方法显示内容的高性能方法。一旦你构建了这类幻灯片，你就能向它们添加任何你想要的内容；文字，图像，视频，你的姓名。如下图所示构建的简单的彩色轮播：

1.先构建html，放置左右按钮和每一屏显示的内容，如下所示：section class=slider|wrapperul class=slides|container id=slides|containerli class=slide style=background|color: #49b293;Slide 1/lili class=slide style=background|color: #b03532;Slide 2/lili class=slide style=background|color: #6a478f;Slide 3/lili class=slide style=background|color: #da6f2b;Slide 4/li/ulbutton class=slide|arrow id=slide|arrow|prev img src=images/arrow|left.jpg/ /buttonbutton class=slide|arrow id=slide|arrow|next img src=images/arrow|right.jpg/ /button/section2.设置css轮播的样式，第一设置slider|wrapper,slides|container和slide类的样式，父级div.slider|wrapper要设置overflow: hidden，幻灯片的div.slides|container要设置overflow: scroll;和display: flex，使其在一行上显示所有些轮播内容，而且overflow: scroll可以允许用户手工切换轮播，使其可拖动，还有一个要紧属性是scroll|behaviour，这是允许容器平滑滚动到下一张幻灯片而不是立即移动的属性。类名div.slide|arrow是设置左右切换按钮的样式。如下所示：.slider|wrapper { margin: 100px; position: relative; overflow: hidden; }.slides|container { height: calc(100vh | 200px); width: 100%; display: flex; overflow: scroll; scroll|behavior: smooth; list|style: none; margin: 0; padding: 0; }.slide|arrow { position: absolute; display: flex; TOP: 0; bottom: 0; margin: auto; height: 50px; background|color: white; border: none; width: 50px; padding: 0; cursor: pointer; opacity: 0.5; transition: opacity 100ms; }.slide|arrow:hover, .slide|arrow:focus { opacity: 1; }#slide|arrow|prev { left: 0;}#slide|arrow|next { right: 0;}.slide { width: 100%; height: 100%; flex: 1 0 100%; }应该注意的是，假如无需滚动条，则需要额外设置：.slides|container {scrollbar|width: none; |ms|overflow|style: none; }.slides|container::|webkit|scrollbar {width: 0;height: 0;}用 Javascript 添加滑块功能，滑块功能涉及两部分逻辑，分别是单击前进箭头时显示下一屏内容，单击后退箭头时显示上一屏内容，先要获得滑块的所有元素，然后将点击事件监听器添加到下一个按钮，当按钮被点击时，得到一张幻灯片的宽度值，通过增加的scrollLeft属性，稍作调整就能将相同的逻辑应用于后退箭头按钮，不过用这种办法，不是添加到scrollLeft属性中，而是减去幻灯片的宽度，如此就能在按下后退箭头时向后移动了。如下所示：const slidesContainer = document.getElementById(slides|container);const slide = document.querySelector(.slide);const prevButton = document.getElementById(slide|arrow|prev);const nextButton = document.getElementById(slide|arrow|next);nextButton.addEventListener(click, () = {const slideWidth = slide.clientWidth;slidesContainer.scrollLeft += slideWidth;});prevButton.addEventListener(click, () = {const slideWidth = slide.clientWidth;slidesContainer.scrollLeft |= slideWidth;});