HTML, CSS et jQuery : créez un carrousel avec un effet de fondu

HTML, CSS et jQuery : créez un carrousel avec des effets de fondu d'entrée et de sortie

Avec la popularité d'Internet, les carrousels sont devenus l'un des éléments courants de la conception Web. Non seulement il peut être utilisé pour afficher plusieurs images ou informations sur les produits, mais il peut également améliorer l'expérience visuelle de l'utilisateur en changeant dynamiquement d'image. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un carrousel avec des effets de fondu d'entrée et de sortie.

Tout d’abord, nous devons créer la structure HTML. Ajoutez un conteneur <div> dans la balise <code> et définissez-lui un identifiant unique, tel que <div id="slideshow">. Dans ce conteneur, nous pouvons ajouter plusieurs éléments <code><img class="active lazy" src="/static/imghw/default1.png" data-src="image1.jpg" alt="HTML, CSS et jQuery : créez un carrousel avec un effet de fondu" >, chaque élément représente une image à faire pivoter. Afin d'obtenir l'effet de fondu d'entrée et de fondu de sortie, nous pouvons définir toutes les images sur un positionnement absolu et utiliser CSS pour masquer d'autres images et afficher uniquement l'image actuelle. 标签中添加一个<div>容器，并为它设置一个唯一的ID，比如<code><div id="slideshow">。在这个容器中，我们可以添加多个<code><img class="active lazy" src="/static/imghw/default1.png" data-src="image1.jpg" alt="HTML, CSS et jQuery : créez un carrousel avec un effet de fondu" >元素，每个元素代表一张要轮播的图片。为了实现淡入淡出效果，我们可以将所有图片都设置为绝对定位，并使用CSS隐藏其他图片，只显示当前图片。

以下是HTML代码示例：

    <title>带有淡入淡出效果的轮播图</title>
    <style>
        #slideshow {
            position: relative;
            width: 800px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }

        #slideshow img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        #slideshow img.active {
            opacity: 1;
        }
    </style>


    <div id="slideshow">
        <img  class="active lazy" src="/static/imghw/default1.png" data-src="image1.jpg" alt="HTML, CSS et jQuery : créez un carrousel avec un effet de fondu" >
        <img  src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="HTML, CSS et jQuery : créez un carrousel avec un effet de fondu" >
        <img  src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt="HTML, CSS et jQuery : créez un carrousel avec un effet de fondu" >
    </div>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>

接下来，我们需要使用CSS来设置轮播图的样式。在样式中，我们首先为轮播图容器#slideshow设置了一个相对定位，并指定了容器的宽度、高度和边距。然后，我们为轮播图中的图片设置了绝对定位，并将它们的位置设置为顶部和左侧都为0，使它们重叠在一起。我们还将图片的初始透明度设置为0，并通过CSS过渡效果实现了透明度从0到1的过渡动画。

在默认情况下，轮播图的第一张图片应该是可见的，而其他图片应该是隐藏的。为了实现这个效果，我们使用了一个名为active的CSS类，并将其添加到第一张图片上。在CSS中，我们设置了active类的透明度为1，而其他图片的透明度仍然是0。

现在，我们需要使用jQuery来实现图片的切换效果。在标签的底部，我们通过添加以下代码来引入jQuery库和自定义的JavaScript脚本。

<script src="jquery.min.js"></script>
<script src="script.js"></script>

在script.js文件中，我们需要编写JavaScript代码来实现轮播图的切换功能。以下是代码示例：

$(document).ready(function(){
    setInterval(function() {
        $('#slideshow img.active').fadeTo(1000, 0, function() {
            $(this).removeClass('active');

            if ($(this).next('img').length) {
                $(this).next('img').fadeTo(1000, 1).addClass('active');
            } else {
                $('#slideshow img:first').fadeTo(1000, 1).addClass('active');
            }
        });
    }, 3000);
});

在以上代码中，我们使用了setInterval函数来设置轮播图的自动切换时间间隔。函数中的3000表示每隔3秒自动切换一次图片。

在函数内部，我们首先找到当前显示的图片，并使用fadeTo函数将其透明度从1渐变为0。在动画完成后，我们将active类从这张图片上移除。然后，我们检查下一张图片是否存在。如果存在，我们将其透明度从0渐变为1，并将active类添加到这张图片上。如果不存在，则将active

Ce qui suit est un exemple de code HTML :

rrreee

Ensuite, nous devons utiliser CSS pour styliser le carrousel. Dans le style, nous définissons d'abord un positionnement relatif pour le conteneur carrousel #slideshow et spécifions la largeur, la hauteur et la marge du conteneur. Nous définissons ensuite le positionnement absolu des images dans le carrousel et définissons leurs positions sur 0 pour les côtés supérieur et gauche afin qu'elles se chevauchent. Nous avons également défini la transparence initiale de l'image sur 0 et implémenté une animation de transition de transparence de 0 à 1 via un effet de transition CSS. 🎜🎜Par défaut, la première image du carrousel doit être visible, tandis que les autres images doivent être masquées. Pour obtenir cet effet, nous utilisons une classe CSS appelée active et l'ajoutons à la première image. En CSS, nous définissons la transparence de la classe active à 1, tandis que la transparence des autres images est toujours à 0. 🎜🎜Maintenant, nous devons utiliser jQuery pour obtenir l'effet de changement d'image. Au bas de la balise , nous introduisons la bibliothèque jQuery et le script JavaScript personnalisé en ajoutant le code suivant. 🎜rrreee🎜Dans le fichier script.js, nous devons écrire du code JavaScript pour implémenter la fonction de commutation de carrousel. Voici un exemple de code : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la fonction setInterval pour définir l'intervalle de temps de commutation automatique du carrousel. 3000 dans la fonction signifie changer automatiquement d'image toutes les 3 secondes. 🎜🎜À l'intérieur de la fonction, nous trouvons d'abord l'image actuellement affichée et utilisons la fonction fadeTo pour faire fondre sa transparence de 1 à 0. Une fois l'animation terminée, nous supprimons la classe active de l'image. Ensuite, nous vérifions si l'image suivante existe. Si elle est présente, nous augmentons sa transparence de 0 à 1 et ajoutons la classe active à l'image. Si elle n'existe pas, ajoutez la classe active à la première image du carrousel pour la faire réafficher. 🎜🎜Avec le code HTML, CSS et JavaScript ci-dessus, nous avons réussi à créer un carrousel avec un effet de fondu d'entrée et de sortie. En ajustant les styles CSS et le code JavaScript, davantage de styles et d'effets d'animation peuvent être obtenus pour répondre à différents besoins. Cette image de carrousel peut être utilisée pour afficher des produits, des informations promotionnelles ou d'excellents travaux sur des pages Web afin d'améliorer l'expérience visuelle et l'activité de l'utilisateur. 🎜