How to achieve seamless left and right sliding switching effect of images in JavaScript?

JavaScript How to achieve the seamless left and right sliding switching effect of images?

With the development of the Internet, images are often used as important elements of the page in web design. The switching effect of pictures plays an important impact on the beauty and interactivity of the page. In this article, we will explore how to use JavaScript to achieve a seamless left-right sliding switching effect of images, with specific code examples.

To achieve the seamless sliding switching effect of left and right pictures, you first need to do the following:

1. Create a picture container to place multiple pictures to achieve the sliding switching effect.
2. Set the style so that the image container can be arranged horizontally and hide the part that exceeds the width of the container.
3. Use JavaScript to control the position of the container and achieve the switching effect of images.

The following is a specific code example:

HTML code:

<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; / Set container Width/
overflow: hidden; / Hide the part that exceeds the width of the container/
}

.slider-list {
width: 300%; / Set the width of the container to 3 times the total width of the image /
display: flex; / Set the horizontal arrangement of the image /
transition: transform 0.5s; / Add Transition effect/
}

.slider-list li {
flex: 1 0 100%; / Set the width of each image to 1/3 of the container width /
}

JavaScript 代码：

function slideNext() {
let sliderList = document.querySelector('.slider-list');
let currTranslate = window.getComputedStyle(sliderList). getPropertyValue('transform'); // Get the displacement value of the current container to determine whether it has reached the last picture

if (currTranslate === 'none') currTranslate = 0; // Get the initial The displacement value is 'none', convert it to 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'); // Get the displacement value of the current container , used to determine whether the first picture has been reached

if (currTranslate === 'none') currTranslate = 0; // The initial displacement value obtained is 'none', and it is converted to 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); // Call the slideNext function regularly to achieve automatic switching

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

The above is the detailed content of How to achieve seamless left and right sliding switching effect of images in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!