HTML, CSS, and jQuery: Create a carousel with a fade effect

HTML, CSS and jQuery: Make a carousel image with a fade-in and fade-out effect

With the popularity of the Internet, carousel images have become common in web design one of the elements. Not only can it be used to display multiple pictures or product information, it can also improve the user's visual experience by dynamically switching pictures. This article will introduce how to use HTML, CSS and jQuery to create a carousel with fade-in and fade-out effects.

First, we need to create the HTML structure. Add a <div> container in the <code> tag and set a unique ID for it, such as <div id="slideshow"> . In this container, we can add multiple <code><img class="active lazy" src="/static/imghwm/default1.png" data-src="image1.jpg" alt="HTML, CSS, and jQuery: Create a carousel with a fade effect" > elements, each element represents an image to be rotated. In order to achieve the fade-in and fade-out effect, we can set all images to absolute positioning and use CSS to hide other images and only display the current image.

The following is an HTML code example:

    <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/imghwm/default1.png" data-src="image1.jpg" alt="HTML, CSS, and jQuery: Create a carousel with a fade effect" >
        <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="HTML, CSS, and jQuery: Create a carousel with a fade effect" >
        <img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="HTML, CSS, and jQuery: Create a carousel with a fade effect" >
    </div>

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

Next, we need to use CSS to style the carousel. In the style, we first set a relative positioning for the carousel container #slideshow and specify the width, height and margin of the container. We then set absolute positioning for the images in the carousel and set their positions to 0 for both the top and left sides so that they overlap. We also set the initial transparency of the image to 0 and implemented a transition animation of transparency from 0 to 1 through a CSS transition effect.

By default, the first image of the carousel should be visible, while the other images should be hidden. To achieve this effect, we use a CSS class called active and add it to the first image. In CSS, we set the transparency of the active class to 1, while the transparency of other images is still 0.

Now, we need to use jQuery to achieve the image switching effect. At the bottom of the tag, we introduce the jQuery library and custom JavaScript script by adding the following code.

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

In the script.js file, we need to write JavaScript code to implement the carousel switching function. The following is a code example:

$(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);
});

In the above code, we use the setInterval function to set the automatic switching interval of the carousel. 3000 in the function means automatically switching pictures every 3 seconds.

Inside the function, we first find the currently displayed image and use the fadeTo function to fade its transparency from 1 to 0. After the animation is complete, we remove the active class from the image. Then we check if the next image exists. If it exists, we ramp its transparency from 0 to 1 and add the active class to this image. If it does not exist, add the active class to the first image in the carousel to make it redisplay.

With the above HTML, CSS and JavaScript code, we successfully created a carousel with a fade-in and fade-out effect. By adjusting CSS styles and JavaScript code, more styles and animation effects can be achieved to meet different needs. This carousel image can be used to display products, promotional information, or excellent works on web pages to enhance the user's visual experience and activity.