How to implement carousel image carousel effect with JavaScript?

JavaScript How to achieve the carousel image carousel effect?

Introduction:
The carousel effect is a common picture carousel effect. It arranges multiple pictures according to certain rules through rotation, and displays different pictures in regular rotation, adding a certain degree to the page. dynamic and visual effects. This article will use JavaScript as an example to introduce how to implement the carousel image carousel effect and provide specific code examples.

Implementation steps:

1. HTML structure
   First, create a container element in HTML as the outer container of the carousel, and create multiple picture elements in the container, Used to store images for display. For example:

<div class="carousel-container">
    <img src="/static/imghwm/default1.png"  data-src="img1.jpg"  class="lazy" alt="image1">
    <img src="/static/imghwm/default1.png"  data-src="img2.jpg"  class="lazy" alt="image2">
    <img src="/static/imghwm/default1.png"  data-src="img3.jpg"  class="lazy" alt="image3">
    <!-- 更多图片元素 -->
</div>

2. CSS style
   Set the style of container elements through CSS, including setting the width and height of the container, setting the arrangement of picture elements, etc. For example:

.carousel-container {
    width: 600px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

.carousel-container img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s;
}

.carousel-container img.active {
    opacity: 1;
}

3. JavaScript implementation
   Realize the carousel effect through JavaScript. The specific implementation method is as follows:

var carousel = document.querySelector('.carousel-container');
var images = carousel.querySelectorAll('img');
var currentIndex = 0;

function showImage(index) {
    if (index < 0) {
        index = images.length - 1;
    } else if (index >= images.length) {
        index = 0;
    }

    images.forEach(function(image) {
        image.classList.remove('active');
    });

    images[index].classList.add('active');
}

function nextImage() {
    showImage(currentIndex + 1);
    currentIndex++;
}

function prevImage() {
    showImage(currentIndex - 1);
    currentIndex--;
}

function autoPlay() {
    setInterval(nextImage, 3000);
}

showImage(currentIndex);
autoPlay();

Explanation:

• First, obtain the container element and the image element in it through the querySelector method, and define a Variable currentIndex represents the index of the current picture.
• Definition showImage The function is used to display the image at the specified index. By adding the active class to the corresponding image element, the image can be switched between visible and hidden. Also, before switching images, you need to remove the active classes of other image elements.
• Definition nextImage function and prevImage function, used to switch to the next and previous pictures. When switching images, the showImage function will be called and the value of currentIndex will be updated.
• Definition autoPlay The function is used to automatically play pictures. The setInterval method calls the nextImage function at regular intervals to switch pictures.
• Finally, call the showImage function to display the image in the initial state, and call the autoPlay function to start automatic playback.

Summary:
Through the above steps, we can achieve a simple carousel image carousel effect. When the page loads, the first image is displayed and automatically switches to the next image within a certain time interval. Users can also switch to the previous or next image by clicking a button. Through JavaScript operation and CSS style setting, we can easily realize the carousel image carousel effect and improve the dynamic and visual effects of the page.

The above is the detailed content of How to implement carousel image carousel effect with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!