How to achieve image rotation effect with javascript

With the development of the Internet, picture rotation has become an indispensable part of web design. JavaScript is one of the most important tools when implementing image rotation. This article will introduce how to use javascript to implement a simple but powerful picture wheel display effect.

1. Implementation Principle

The basic principle of picture rotation is to continuously switch the displayed pictures, thereby bringing different visual experiences to users. When using JavaScript to implement image rotation, we can do it through the following steps:

1. Store the images that need to be rotated in an array.

2. Obtain the image container and control button through DOM.

3. Set the timer, continuously switch the displayed pictures, and modify the status of the control buttons.

2. Code Implementation

Before we start writing code, let’s take a look at the HTML structure:

<img src="img/1.jpg" alt="img1"/>
<img src="img/2.jpg" alt="img2"/>
<img src="img/3.jpg" alt="img3"/>

<button class="btn active"></button>
<button class="btn"></button>
<button class="btn"></button>

We use a div container to load You need to rotate the image and use another div container to place the rotation control button.

Next, we will use javascript to implement wheel display effects. The specific code is as follows:

var images = document.querySelectorAll('.img-container img'),

buttons = document.querySelectorAll('.btn'),
currentIndex = 0;

//Switch images
function switchImages(index) {

for (var i = 0; i < images.length; i++) {
    images[i].style.display = 'none';
    buttons[i].className = 'btn';
}
images[index].style.display = 'block';
buttons[index].className = 'btn active';

}

//Timer
setInterval(function() {

currentIndex = (currentIndex + 1) % images.length;
switchImages(currentIndex);

}, 3000);

In the above code, we obtain it through querySelectorAll The pictures and carousel buttons need to be displayed statically, and a variable currentIndex is defined to record the serial number of the picture that should be displayed currently. In the function switchImages for switching pictures, we first set the status of all pictures and buttons to 'none' and normal status, and then redisplay the pictures to be displayed and change the status of the corresponding buttons according to the passed parameter index. Finally, set the function in setInterval to execute the picture switching every 3 seconds, and increase the currentIndex value by 1 each time to avoid infinite loops.

3. Optimization and supplementation

The above code can already realize the basic function of image rotation, but we can also optimize and supplement it. For example, adding functions such as transition effects or thumbnail previews can make the wheel display more vivid, beautiful and practical.

1. Add transition effects

We can add transition effects to images through the transition attribute of CSS3. The code is as follows:

.img-container img {

position: absolute;
top: 0;
left: 0;
transition: all ease-in-out .5s;

}
.img-container img.hide {

opacity: 0;
z-index: 1;

}

In the above code, we set the image style to absolute positioning and use the transition attribute to specify the transition animation Timing and effect. Then, we modify the class name of the previously hidden image to ‘hide’ in the switchImages function to trigger the CSS3 transition effect. Note that we need to delay the execution of the code that modifies the style, otherwise the CSS3 effect will not take effect.

//Switch images
function switchImages(index) {

for (var i = 0; i < images.length; i++) {
    images[i].className = '';
    buttons[i].className = 'btn';
}
images[currentIndex].className = 'hide';
setTimeout(function() {
    images[index].className = 'show';
}, 100);
currentIndex = index;
buttons[currentIndex].className = 'btn active';

}

2. Add thumbnail preview

We can also rotate Thumbnail previews are added to the display control buttons to facilitate users to view the pictures they want to display. The specific code is as follows:

//Create thumbnail preview
for (var i = 0; i < buttons.length; i ) {

buttons[i].style.backgroundImage = "url(" + images[i].src + ")";

}
//Mouse Move in event
for (var j = 0; j < buttons.length; j ) {

buttons[j].onmouseover = function(e) {
    var index = e.target.getAttribute('index');
    switchImages(index);
}

}

In the above code, we use javascript to rotate the button for each The background image is set, and the mouse move event is used to trigger the function of switching images. Through this function, users can directly view the image thumbnails to be displayed on the carousel control panel, which improves the user experience.

4. Summary

By realizing image rotation effects through javascript, we can not only improve the beauty and practicality of web pages, but also gain an in-depth understanding of the application of javascript in web development. Try using the code described in this article to add a picture wheel display effect to your web pages to give users a better experience.

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