400-800-9385
网站建设资讯详细

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

发表日期:2022-09-24 17:55:05   作者来源:林志平   浏览:1194   标签:网站前端制作    
在页面制作中,我们可以使用原生 JavaScript 构建一个非常简单的轮播(或“滑块”)。
这种实现对于基本网站来说是完美的,它也是一种以体面的方式显示内容的高性能方式。一旦你构建了这些幻灯片,你就可以向它们添加任何你想要的内容;文字,图像,视频,你的名字。
如下图所示构建的简单的彩色轮播:

前端

1. 先构建html,放置左右按钮和每一屏显示的内容,如下所示:
<section class="slider-wrapper">
<ul class="slides-container" id="slides-container">
<li class="slide" style="background-color: #49b293;">Slide 1</li>
<li class="slide" style="background-color: #b03532;">Slide 2</li>
<li class="slide" style="background-color: #6a478f;">Slide 3</li>
<li class="slide" style="background-color: #da6f2b;">Slide 4</li>
</ul>
<button class="slide-arrow" id="slide-arrow-prev">
     <img src="images/arrow_left.jpg"/>
   </button>
<button class="slide-arrow" id="slide-arrow-next">
     <img src="images/arrow_right.jpg"/>
   </button>
</section>
2.设置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; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
/* WebKit */
.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;
});
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6539.html