javascript image rotation code

JavaScript image rotation code

In web development, image rotation is a function that is often used. For example, in scenarios such as product display and carousel pictures, we will need to display multiple pictures and switch pictures at a certain time interval. In JavaScript, we can implement the image rotation function through some simple codes.

Ideas

There are many ways to implement image rotation. This article will introduce a method based on JavaScript native syntax. The specific ideas are as follows:

1. First. , we need to prepare a list of pictures to be rotated, and we can use an array to store picture information.

2. Next, we need to define a counter to record which picture in the list the current picture is.

3. Then, we can dynamically add images to the page by calling JavaScript's DOM API.

4. Finally, we need to set a timer to update the counter every once in a while and switch to display the next picture.

Implementation steps

First, we need to prepare the picture list. Here, we can use a JavaScript array to store image information. Each element in the array is an object, including the url and alt of the image.

let images = [
    { url: './img/1.jpg', alt: 'pic1' },
    { url: './img/2.jpg', alt: 'pic2' },
    { url: './img/3.jpg', alt: 'pic3' },
    { url: './img/4.jpg', alt: 'pic4' },
    { url: './img/5.jpg', alt: 'pic5' }
];

Next, we define a counter variable currentIdx to record the serial number of the picture currently being displayed. Because array indexing starts at 0, the initial value of currentIdx should be 0.

let currentIdx = 0;

Then, we can dynamically create an img element through JavaScript's DOM API and add it to the page.

let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);

It should be noted that the newly created img element is added to an element with the id of imgWrapper. We need to define this element in the page first.

<div id="imgWrapper"></div>

Next, we need to set a timer to switch to display the next picture every certain time. In JavaScript, we can achieve this through the setTimeout or setInterval function. Here we choose to use setInterval.

let intervalId = setInterval(function() {
    currentIdx++;
    if (currentIdx >= images.length) {
        currentIdx = 0;
    }
    img.src = images[currentIdx].url;
    img.alt = images[currentIdx].alt;
}, 3000);

In the above code, the first parameter of the setInterval function is an anonymous function. This function is used to update the serial number and image information of the current picture and assign it to the img element. src and alt attributes. The second parameter is the time interval of the timer, in milliseconds. For example, in the above code, the anonymous function will be executed every 3000 milliseconds (that is, 3 seconds).

Finally, we need to clear the timer when the page is unloaded, otherwise it may cause a memory leak.

window.onunload = function() {
    clearInterval(intervalId);
};

Complete code

Integrating the above codes, we get a complete image rotation code based on JavaScript native syntax.

let images = [
    { url: './img/1.jpg', alt: 'pic1' },
    { url: './img/2.jpg', alt: 'pic2' },
    { url: './img/3.jpg', alt: 'pic3' },
    { url: './img/4.jpg', alt: 'pic4' },
    { url: './img/5.jpg', alt: 'pic5' }
];

let currentIdx = 0;

let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);

let intervalId = setInterval(function() {
    currentIdx++;
    if (currentIdx >= images.length) {
        currentIdx = 0;
    }
    img.src = images[currentIdx].url;
    img.alt = images[currentIdx].alt;
}, 3000);

window.onunload = function() {
    clearInterval(intervalId);
};

Summary

In this article, we introduce to you an image rotation code implemented using JavaScript native syntax. By studying this article, you can learn how to use JavaScript arrays, DOM API, and timers to implement image rotation. Of course, this code is only the basic code and you can modify and optimize it according to actual needs.

The above is the detailed content of javascript image rotation code. For more information, please follow other related articles on the PHP Chinese website!