Comment obtenir un effet de commutation coulissant fluide vers la gauche et la droite des images en JavaScript ?

JavaScript Comment obtenir un effet de commutation coulissant fluide vers la gauche et la droite des images ?

Avec le développement d'Internet, les images sont souvent utilisées comme éléments importants de la page dans la conception Web. L'effet de changement des images a un impact important sur la beauté et l'interactivité de la page. Dans cet article, nous explorerons comment utiliser JavaScript pour obtenir un effet de commutation glissante fluide des images de gauche à droite, avec des exemples de code spécifiques.

Pour obtenir l'effet de commutation coulissante fluide des images vers la gauche et la droite, vous devez d'abord procéder comme suit :

1. Créez un conteneur d'images pour placer plusieurs images afin d'obtenir l'effet de commutation coulissante.
2. Définissez les styles de manière à ce que le conteneur d'images puisse être disposé horizontalement et masquez la partie qui dépasse la largeur du conteneur.
3. Utilisez JavaScript pour contrôler la position du conteneur et obtenir des effets de changement d'image.

Ce qui suit est un exemple de code spécifique :

Code 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; / Définir la largeur du conteneur/
overflow: Hidden / Masquer la partie qui dépasse la conteneur width/
}

.slider-list {
width: 300%; / Définit la largeur du conteneur à 3 fois la largeur totale de l'image/
display: flex / Définit l'image à organiser horizontalement; /
transition : transformer 0,5s ; / Ajouter un effet de transition/
}

.slider-list li {
flex : 1 0 100% ; / Définir la largeur de chaque image à 1/3 de la largeur du conteneur. /
}

JavaScript 代码：

function slideNext() {
let sliderList = document.querySelector('.slider-list');
let currTranslate = window.getComputedStyle(sliderList).getPropertyValue('transform'); valeur de déplacement du conteneur actuel pour déterminer s'il a atteint la fin A photo

if (currTranslate === 'none') currTranslate = 0; // La valeur de déplacement initiale obtenue est 'aucun', convertissez-la en 0
sinon 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'); // Récupère la valeur de déplacement du conteneur actuel, utilisée pour déterminer si la première image a été atteinte

if (currTranslate === 'none') currTranslate = 0; // La valeur de déplacement initiale obtenue est ' none', convertissez-le en 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); // Appelez régulièrement la fonction slideNext pour obtenir une commutation automatique

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!