首页 > 文章列表 > JavaScript 如何实现图片的左右无缝滑动切换效果?

JavaScript 如何实现图片的左右无缝滑动切换效果?

JavaScript 图片切换 无缝滑动
357 2023-10-19

JavaScript 如何实现图片的左右无缝滑动切换效果?

随着互联网的发展,网页设计中经常会使用图片作为页面的重要元素。而图片的切换效果对于页面的美观度和交互性起着重要的影响。在本篇文章中,我们将探讨如何使用 JavaScript 实现图片的左右无缝滑动切换效果,并附有具体的代码示例。

实现图片的左右无缝滑动切换效果,首先需要做到以下几点:

  1. 建立一个图片容器,用于放置多张图片,实现滑动切换效果。
  2. 设置样式,使图片容器能够水平排列,并隐藏超出容器宽度的部分。
  3. 通过 JavaScript,控制容器的位置,实现图片的切换效果。

下面是具体的代码示例:

HTML 代码:

<div class="slider-container">
  <ul class="slider-list">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
    <!-- 可以添加更多的图片 -->
  </ul>
</div>
````

CSS 代码:

.slider-container {
width: 800px; / 设置容器宽度 /
overflow: hidden; / 隐藏超出容器宽度的部分 /
}

.slider-list {
width: 300%; / 设置容器宽度为图片总宽度的 3 倍 /
display: flex; / 设置图片水平排列 /
transition: transform 0.5s; / 添加过渡效果 /
}

.slider-list li {
flex: 1 0 100%; / 设置每张图片的宽度为容器宽度的 1/3 /
}

JavaScript 代码:

function slideNext() {
let sliderList = document.querySelector('.slider-list');
let currTranslate = window.getComputedStyle(sliderList).getPropertyValue('transform'); // 获取当前容器的位移值,用以判断是否到达最后一张图片

if (currTranslate === 'none') currTranslate = 0; // 获取的初始位移值为 'none',将其转为 0
else currTranslate = parseInt(currTranslate.split(',')[4].trim());

if (currTranslate <= -(sliderList.offsetWidth - document.querySelector('.slider-container').offsetWidth)) {

sliderList.style.transform = `translateX(0px)`; // 如果已经到达最后一张图片,则将容器位移值重置为 0,实现无缝切换

} else {

sliderList.style.transform = `translateX(${currTranslate - document.querySelector('.slider-container').offsetWidth}px)`; // 每次滑动一个图片宽度的距离

}
}

function slidePrev() {
let sliderList = document.querySelector('.slider-list');
let currTranslate = window.getComputedStyle(sliderList).getPropertyValue('transform'); // 获取当前容器的位移值,用以判断是否到达第一张图片

if (currTranslate === 'none') currTranslate = 0; // 获取的初始位移值为 'none',将其转为 0
else currTranslate = parseInt(currTranslate.split(',')[4].trim());

if (currTranslate >= 0) {

sliderList.style.transform = `translateX(-${sliderList.offsetWidth - document.querySelector('.slider-container').offsetWidth}px)`; // 如果已经到达第一张图片,则将容器位移值设置为最后一张图片的位置,实现无缝切换

} else {

sliderList.style.transform = `translateX(${currTranslate + document.querySelector('.slider-container').offsetWidth}px)`; // 每次滑动一个图片宽度的距离

}
}

setInterval(slideNext, 3000); // 定时调用 slideNext 函数,实现自动切换

以上代码示例中,我们使用了一个图片容器 `.slider-container` ,其中包含了一个图片列表 `.slider-list` ,通过调整列表的位置实现图片的滑动切换效果。在 JavaScript 部分,通过 `slideNext` 和 `slidePrev` 函数控制容器的位移值,从而实现了图片的左右无缝滑动切换。另外,我们还使用了 `setInterval` 函数,使图片能够自动切换。