Using JavaScript to achieve image carousel effect

JavaScript is a popular scripting language that can be used to achieve various dynamic effects, including image carousel effects. In this article, I will show you how to create an image carousel effect using JavaScript. This article will be divided into the following three parts:

1. Preparation of HTML and CSS
2. Writing of JavaScript code
3. Achieve image carousel effect

HTML and CSS preparation

Our image carousel effect requires an HTML framework, as shown below:

<div class="slider">
    <ul class="slides">
        <li><img src="image1.jpg"></li>
        <li><img src="image2.jpg"></li>
        <li><img src="image3.jpg"></li>
        <li><img src="image4.jpg"></li>
    </ul>
</div>

On this basis, we need some CSS styles to use The frame has a certain style and layout, as shown below:

.slider {
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.slides {
    display: flex;
    list-style: none;
    height: 100%;
    margin: 0;
    padding: 0;
}
.slides li {
    flex: 1;
}
.slides img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Writing JavaScript code

We first need to set some variables and constants to store our image carousel and sliding status, as follows Display:

const slides = document.querySelectorAll('.slides li');
const slider = document.querySelector('.slider');
const next = document.querySelector('.next');
const prev = document.querySelector('.prev');
const auto = true; // 是否自动播放
const intervalTime = 5000; // 图片切换时间间隔
let slideInterval;
let slideIndex = 0; // 当前图片索引

Next, we need to write a function to achieve the image carousel effect. The following is an example function:

function nextSlide() {
    slides[slideIndex].classList.remove('active');
    slideIndex = (slideIndex + 1) % slides.length;
    slides[slideIndex].classList.add('active');
}

This function will remove the "active" class of the current picture, add the "active" class of the next picture, and increase the current picture index by 1, which will achieve Our image carousel effect.

Next, we need to write another function to handle the autoplay function:

function startSlide() {
    if (auto) {
        slideInterval = setInterval(nextSlide, intervalTime);
    }
}

This function will check if we need to autoplay the picture, if so, it will be called after a certain time interval The function nextSlide we just wrote.

Finally, we also need to write two functions that handle click events to allow users to manually switch pictures:

function pauseSlide() {
    clearInterval(slideInterval);
}

function clickPrev() {
    pauseSlide();
    slides[slideIndex].classList.remove('active');
    slideIndex--;
    if (slideIndex < 0) {
        slideIndex = slides.length - 1;
    }
    slides[slideIndex].classList.add('active');
}
function clickNext() {
    pauseSlide();
    nextSlide();
}

These functions represent pausing automatic playback, switching to the previous picture, and switching. Go to the next picture function.

Implementing the image carousel effect

Now, we have prepared all the HTML, CSS and JavaScript code. Let's put all this code in the same HTML file, then open it and see the effect!

We can switch pictures by clicking the left and right arrows or using the autoplay function. We can also customize the style, position, and size of these arrows to suit our needs.

Summary

In this article, we learned how to use JavaScript to implement a simple image carousel effect. Along the way, we learned how to handle various events and states, creating a dynamic and fluid user experience for us. If you want more dynamic effects similar to the image carousel effect, I recommend that you learn JavaScript programming in depth, it has unlimited creative potential!

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