• 自己动手实现一个幻灯片播放插件
  • 发布于 2个月前
  • 234 热度
    0 评论
  • 张蜚
  • 22 粉丝 35 篇博客
  •   
最近我正在一个项目上工作,需要实现一个幻灯片/轮播。我在网上搜索了一下,但没有找到具有我需要的功能或者还要装一些插件,所以,我想自己创建一个,方便自己使用。

这是一个示例:

HTML
让我们为轮播创建基本的HTML结构:
1.创建一个类为container的div。
2.在此div中创建另一个类为carousel-view的div。一个用于幻灯片向左滚动的按钮。一个带有类item-list的幻灯片项目容器。一个用于幻灯片向右滚动的按钮。
<div class="container">
  <div class="carousel-view">
    <!-- 堆代码 duidaima.com -->
    <!-- 向左按钮 -->
    <button id="prev-btn" class="prev-btn"> </button>

    <!-- 项目容器 -->
        <div id="item-list" class="item-list">
          <!-- 项目 -->
          <img id="item" class="item" src="image-url"/>
          <img id="item" class="item" src="image-url"/>
        </div>

    <!-- 向右按钮 -->
        <button id="next-btn" class="next-btn"> </button>
    </div>
  </div>

CSS
现在,我们来到CSS部分。首先,我们需要做一些基础设置。以下图像说明了CSS的基础结构。

现在让我们看看这个Item-list。由于它是一个水平幻灯片,我们需要水平对齐项目,为此有多种方法,但我选择使用display:flex属性,因为它还可以让我在项目之间添加间距。

所以,基本上我们在这里有一个容器,其中具有可滚动溢出的项目列表,窗口中需要显示的项目数由幻灯片的宽度确定。
现在,让我们谈谈我们在这里使用的神奇咒语。
.item-list{
    ...
    scroll-snap-type: x mandatory;
}

.item{
...
    scroll-snap-align: center;
}
此属性用于控制项目的滚动。我们想要实现的效果是确保一个图片元素要么完全在窗口左侧,要么完全在窗口左侧外。要创建垂直滑块,您可以使用scroll-snap-type: y mandatory。您可以在此处了解有关scroll-snap属性的更多信息。

scroll-snap-type: x mandatory;:这个属性告诉浏览器,当用户滚动一个横向的容器时,需要对容器内的元素进行“捕捉”。x表示只对横向滚动进行捕捉,mandatory表示在滚动结束时一定会进行捕捉,而不是只在用户松开鼠标/手指时才进行捕捉。

scroll-snap-align: center;:这个属性告诉浏览器,在进行捕捉时,需要将滚动位置捕捉到最接近的元素的中心位置。也可以使用其他值,如start(将滚动位置捕捉到最接近的元素的起始位置)和end(将滚动位置捕捉到最接近的元素的末尾位置)等。

这些属性可以极大地改善用户体验,特别是在移动设备上。例如,在一个横向的轮播图或相册中,用户可以通过滚动来查看更多的内容。如果不使用滚动捕捉,用户可能很难找到最接近的元素,而且可能无法对其进行浏览。通过使用这些属性,浏览器可以自动将滚动位置捕捉到最接近的元素,使用户体验更加流畅和自然。
提示:要隐藏滚动条但保留功能,我们可以这样做
/* 隐藏Chrome、Safari和Opera的滚动条 */
.item-list::-webkit-scrollbar {
  display: none;
}

/* 隐藏IE、Edge和Firefox的滚动条 */
.item-list {
  -ms-overflow-style: none;  /* IE和Edge */
  scrollbar-width: none;  /* Firefox */
}
以下是完整的CSS代码
button{
    border: none;
    cursor: pointer;
    color: white;
    background: none;
    transition: all .3s ease-in-out;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.carousel-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 44px 0;
  transition: all 0.25s ease-in;
}

.carousel-view .item-list {
  max-width: 950px;
  width: 70vw;
  padding: 50px 10px;
  display: flex;
  gap: 48px;
  scroll-behavior: smooth;
  transition: all 0.25s ease-in;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overflow: auto;
  scroll-snap-type: x mandatory;
}

/* 堆代码 duidaima.com */
/* Hide scrollbar for Chrome, Safari and Opera */
.item-list::-webkit-scrollbar {
  display: none;
}

.prev-btn {
  background = none;
  cursor: pointer;
}

.next-btn {
  cursor: pointer;
}

.item {
  scroll-snap-align: center;
  min-width: 120px;
  height: 120px;
  background-color: deeppink;
  border-radius:8px;
}
JavaScript
现在是时候实现按钮的功能了:使用document.getElementById()函数从文档中获取nextButton、prevButton和itemList对象。
现在实现单击时的项目滚动,使用eventListener。
const prev = document.getElementById('prev-btn')
const next = document.getElementById('next-btn')
const list = document.getElementById('item-list')
const itemWidth = 150
const padding = 10

prev.addEventListener('click',()=>{
  list.scrollLeft -= (itemWidth + padding)
})
next.addEventListener('click',()=>{
  list.scrollLeft += (itemWidth + padding)
})
每当用户与按钮交互时,它的addEventListener将被触发,并且传递事件类型click确保回调函数仅在单击时执行。
现在,在回调函数中,我们正在减小和增加scrollLeft属性的值,以向右和向左滑动itemList。
以下是幻灯片的完整代码和演示:
https://codepen.io/mohitsharma0101/pen/WNJJzwM
结束
到这里,本案例就介绍到这里,建议大家还是亲自实践下,才能印象深刻。感谢你的阅读。
用户评论