How to rotate images in javascript

JavaScript is a popular programming language that can dynamically display content in web pages. In web design, image rotation is an important part of increasing the interactivity and appeal of a page. The following will introduce how to use JavaScript to achieve the image rotation effect.

1. Preparation of HTML and CSS

In the HTML file, we need to first define an image container and use the ul and li tag structures to write code. The ul tag represents the image container, and the li tag represents the image. As shown below:

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
</div>

In the CSS file, we need to set the style of the image container and image, including width, height, position and other attributes, and use the overflow:hidden attribute to hide the content outside the container and only display the specified part within the range. As shown below:

#slider {
   width: 600px;
   height: 400px;
   position: relative;
   overflow: hidden;
 }
 
 #slider ul {
   position: absolute;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 300%;
 }
 
 #slider ul li {
   float: left;
   width: 33.33%;
   height: 400px;
 }

 #slider ul li img {
   width: 100%;
   height: 100%;
   display: block;
 }

2. Implementation of JavaScript

In JavaScript, we need to operate the image container to achieve the image rotation effect. We can define a timer to animate the image over time. The code is as follows:

var slider = document.getElementById("slider");
var ul = slider.children[0];
var liWidth = slider.offsetWidth / 3;
var currentIndex = 0;
var timer;

function autoPlay() {
  timer = setInterval(function() {
    currentIndex++;
    if (currentIndex >= 3) {
      currentIndex = 0;
    }
    ul.style.left = -currentIndex * liWidth + "px";
  }, 3000);
}
autoPlay();

In the code, we first obtain the container slider containing the image and the ul element within the container. We can calculate the width of each image by dividing the container width by the number of li's. Next, define a variable currentIndex that holds the current image index in order to track the rotation status. Finally, we use the setInterval function to define a timer that runs every 3 seconds to change the currentIndex value and the left margin of ul to automatically rotate the image. Also, use the clearInterval function to stop the timer when you need to stop rotation.

3. Add a picture indicator

If you want to add an indicator to the picture rotation effect, you can add an indicator container to the HTML code and use JavaScript to dynamically create the indicator. The code is as follows:

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
  <div id="indicator"></div>
</div>

var indicator = document.getElementById("indicator");

for (var i = 0; i < 3; i++) {
  var div = document.createElement("div");
  div.className = "dot";
  div.setAttribute("index", i);
  div.onclick = function() {
    currentIndex = parseInt(this.getAttribute("index"));
    ul.style.left = -currentIndex * liWidth + "px";
    setActive();
  };
  indicator.appendChild(div);
}

function setActive() {
  var dots = document.getElementsByClassName("dot");
  for (var i = 0; i < dots.length; i++) {
    if (currentIndex == i) {
      dots[i].className = "dot active";
    } else {
      dots[i].className = "dot";
    }
  }
}
setActive();

We first obtain the indicator container indicator, and then use loop statements to dynamically create several div elements with index attributes to represent the indicator points of each picture. We then add an onclick event for each indicator point. When the indicator point is clicked, the current image index currentIndex is changed, and the left margin of ul is set to left, and the indicator point is set to the active state. In the setActive function, we loop through all the indicator points, add the active class name to the currently selected indicator point, and deepen its background color to distinguish it from the unselected indicator points.

4. Summary

This article introduces how to use HTML, CSS and JavaScript to achieve image rotation effects, while adding indicators to improve user experience. If you are interested in learning JavaScript programming in depth, it is recommended to practice more similar web animation, interaction design and special effects to improve your skills and practical project development experience.

The above is the detailed content of How to rotate images in javascript. For more information, please follow other related articles on the PHP Chinese website!