Pure JS rotation map (click the button to switch to the next one)

Can control whether automatic rotation
Left and right arrows toggle up, down, throttling
Mouse over the arrow, the picture stop automatic rotation, mouse away then continue to play
Click on the dot to jump to the picture in the corresponding order
The mobile terminal can switch from left to right

Implementation idea:

The details are explained in the comments of the code

HTML code:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Shuffling figure</title>
    <link rel="stylesheet" href="CSS/carouch.css">
    <script src="Js/cartes.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <a href="javascipt:;" class="prev"></a>//href='javascript:; 'Can achieve the function of not jumping<ul class="img_wrapper">
        <li><img src="img/img1.jpg"></img></li>
        <li><img src="img/img2.jpg"></img></li>
        <li><img src="img/img3.jpg"></img></li>
        <li><img src="img/img4.jpg"></img></li>
        <li><img src="img/img5.jpg"></img></li>
        <li><img src="img/img6.jpg"></img></li>
      </ul>
      <a href="javascipt:;" class="next"></a>
      <ul class="circle">// Here is the place to store small circles, in js will be added according to the number of images</ul>
    </div>
  </body>
</html>

Copy the code

The CSS code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
.wrapper {
  position: relative;
  width: 500px;
  height: 350px;
  background-color: pink;
  margin: 100px auto;
  overflow: hidden; // display only one image, other image hidden}.img_wrapper {
  position: absolute; // When using absolute positioning, remember that children use absolute positioning, and parents use relative positioning.top: 0;
  width: 0;
  width: 700%; // Note not the width of one image, but the width of all images, so that the image box fits all imagesheight: 350px;
}
.img_wrapper > li {
  float: left; // Float left to make picture boxliIn a row with no gapswidth: 500px;
  height: 350px;
}
.img_wrapper > li > img {
  width: 500px; // Make the width and height of the image equal to the width and height of the parent boxheight: 350px;
}
.wrapper > a{// This is the common property of the previous image and the next image buttonsposition: absolute;
  top: 50%;
  width: 35px;
  height: 35px;
  margin-top: -17.5 px.;
  background-color: rgba(0.0.0.0.3);
  z-index: 3;
  display: none;
}
.prev {
  left: 0;
  background: url(".. /img/prev.png") no-repeat center;
}
.next {
  right: 0;
  background: url(".. /img/next.png") no-repeat center;
}
.circle {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 10px;
  left: 50%;
  background-color: rgba(245.245.245.0.4);
  padding: 2px 5px;
  border-radius: 5px;
}
.circle > li {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid white;
  margin: 0 3px;
  cursor: pointer;
}
.current{// This property is added to the small circle, the current image of the small circle background becomes whitebackground-color: white;
}

Copy the code

Js code:

window.addEventListener("DOMContentLoaded".function () {  
  var wrapper = document.querySelector(".wrapper");
  var prev = document.querySelector(".prev");
  var next = document.querySelector(".next");
  var img_wrapper = document.querySelector(".img_wrapper");
  var circle = document.querySelector(".circle");
  //flag is used to determine whether the previous animation has been completed before the next animation (animation here refers to the animation of the picture sliding left and right)
  var flag = true;  
  var num = 0;  //num is used to determine the number of images
  var timerA = setInterval(() = > {  // This timer automatically plays the next image
    next.click();  Instead of changing the displacement of the box directly, click the next button
  }, 1500);
  
  // Use the for loop to create a circle
  for (var i = 0; i < img_wrapper.children.length; i++) {
    var li = document.createElement("li");
    circle.appendChild(li);
    // Use setAttribute to add a custom index attribute to the small circle and assign a value so that the index can be used to obtain the current image number
    li.setAttribute("index", i);
    li.addEventListener("click".function () {
      for (var j = 0; j < circle.children.length; j++) {
        circle.children[j].className = "";
      }
      this.className = "current";  // Each time you click on the circle, the circle turns white and the rest of the circle turns transparent (exclusive thinking)
      
      num = this.getAttribute("index");
      animate(  // You can also switch pictures by clicking the small circle
        img_wrapper,
        -img_wrapper.parentElement.offsetWidth * this.getAttribute("index")); }); }// Since clicking the next image after playing the last image will return the animation to the first image, and the image is very ugly, to achieve a seamless image switch, you need to copy the first image and put it at the end. Because the code to add the small circles is executed before the first image is copied, the number of small circles is not affected.

  var firstImg = img_wrapper.children[0].cloneNode(true);// Create a node
  img_wrapper.appendChild(firstImg);// Add a node
  var circleLis = circle.querySelectorAll("li");// Add all the circles to the array
  circleLis[0].className = "current";// The first circle defaults to the current state
  
  // Since CSS left is 50%, it is not centered. When we add the circle, we get the size of the box and make the radius equal to half of the negative box
  circle.style.marginLeft = -(circle.offsetWidth / 2) + "px";

// When the mouse is not in the picture box, the two buttons for switching pictures will not be displayed. Here the button will be displayed when the mouse is over the box, and the function of auto playing pictures will be suspended
  wrapper.addEventListener("mouseenter".function () {
    prev.style.display = "block";
    next.style.display = "block";
    clearInterval(timerA);  // Clear the timer and pause the auto play function
    timerA = null;
  });
  
  // When the mouse mouse moves away from the top of the box, the button is hidden and the auto play function starts
  wrapper.addEventListener("mouseleave".function () {
    prev.style.display = "none";
    next.style.display = "none"; 
    timerA = setInterval(() = > {  // Add timer to start automatic playback function
      next.click();
    }, 1500);
  });

  next.addEventListener("click".function () {
    if (flag) {  //flag Determines whether the last animation is complete
      flag = false;// Set flag to false when starting this animation (switching images) so that clicking the button again will not start the next animation
      The last image is the same as the first image. If it is already the last image, make the left value of the image box immediately return to 0, i.e. the original position, so that the next image will be switched to the second image
      if (num == img_wrapper.children.length - 1) {
        img_wrapper.style.left = 0 + "px";
        num = 0;
      }
      num++;

      animate(
        img_wrapper,
        -num * img_wrapper.parentElement.offsetWidth,
        function () {
          flag = true;
        }
        
        // Animation ends with flag=true
      );
        // Change the background color of the small circle so that the background color of the small circle changes as the image changes
      for (var i = 0; i < circleLis.length; i++) {
        circleLis[i].className = "";

        if (num == img_wrapper.children.length - 1) {  
        // The first small circle changes the background color when the image is the last
          circleLis[0].className = "current";
        } else {
          circleLis[num].className = "current"; }}}});// The button code in the previous image is similar to the one in the next
  prev.addEventListener("click".function () {
    if (flag) {
      if (num == 0) {
        num = img_wrapper.children.length - 1;
        img_wrapper.style.left =
          -num * img_wrapper.parentElement.offsetWidth + "px";
      }
      num--;
      animate(
        img_wrapper,
        -num * img_wrapper.parentElement.offsetWidth,
        function () {
          flag = true; });for (var i = 0; i < circleLis.length; i++) {
        circleLis[i].className = "";
        circleLis[num].className = "current"; }}});// Toggle the animation of the image
//obj: target box, target: distance to be moved
  function animate(obj, target, callback) {
    clearInterval(obj.timer);// Clear the timer first to prevent the stacking of too many timers
    
    obj.timer = setInterval(() = > {
      if (obj.offsetLeft == target) {// Clear the timer when the left value of the target box equals the target distance
        clearInterval(obj.timer);
        // if (callback) {
        // callback();
        //} is equivalent to:
        callback && callback();
      } else {
        obj.step = (target - obj.offsetLeft) / 10;  // This line of code can achieve variable speed movement, do not understand their own numerical calculations
        if (obj.step >= 0) {
          obj.step = Math.ceil(obj.step);
        } else {
          obj.step = Math.floor(obj.step);
        }

        obj.style.left = obj.offsetLeft + obj.step + "px"; }},15); }});Copy the code

Pure JS rotation map (click the button to switch to the next one)

Related Posts

Echart code analysis

How to implement a simple React based online edit preview component

Here’s what you need to know about the Http protocol