JavaScript to implement simple carousel chart most complete code analysis (ES5)

This article shares the specific code for JavaScript to achieve a simple carousel effect for your reference. The specific content is as follows

Full code:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>ES5 Carousel Image</title>
  <style>
   * {padding: 0;margin: 0;}
   #wrapper {
    position: relative;
    margin: 50px auto;
    padding: 0;
    width: 1000px;
    height: 300px;
   }
   #wrapper .content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
   }
   #wrapper>.content>.imgs {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 6000px;
    /*Leave enough space for an extra image! */
    list-style: none;
   }
   #wrapper>.content>.imgs li {
    float: left;
    margin: 0;
    padding: 0;
    width: 1000px;
    height: 300px;
   }
   #wrapper>.content>.imgs>li img {
    width: 100%;
    height: 100%;
   }
   #wrapper>.content>.dots {
    width: 163px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 10px;
    list-style: none;
   }
   #wrapper>.content>.dots li {
    float: left;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
   }
   li.active {
    background-color: white;
   }
   li.quiet {
    background-color: #5a5a58;
   }
   .btns {
    display: none;
   }
   .btns span {
    position: absolute;
    width: 25px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: Simsun;
    font-size: 30px;
    border: 1px solid #fff;
    opacity: 0.5;
    cursor: pointer;
    color: #fff;
    background: black;
   }
   .btns .left {
    left: 5px;
   }
   .btns .right {
    left: 100%;
    margin-left: -32px;
   }
  </style>
 </head>
 <body>
  <div id="wrapper">
   <div class="content">
    <ul class="imgs">
     <li><img src="img/s1.jpg" /></li>
     <li><img src="img/s2.jpg" /></li>
     <li><img src="img/s3.jpg" /></li>
     <li><img src="img/s4.jpg" /></li>
     <li><img src="img/s5.jpg" /></li>
    </ul>
    <ul class='dots'></ul>
   </div>
   <div class="btns">
    <span class="left">&lt;</span>
    <span class="right">&gt;</span>
   </div>
  </div>
 </body>
</html>
<script>
 var wrapper = document.getElementById("wrapper");
 var imgs = document.getElementsByClassName("imgs")[0];
 var dots = document.getElementsByClassName("dots")[0];
 var btns = document.getElementsByClassName("btns")[0];
 var dots = dots.children;
 var len = imgs.children.length; //Number of images var width = wrapper.offsetWidth; //Width of each image var rate = 15; //Switching speed of an image, in px
 var times = 1; //Switching speed multiple var timer = null; //Initialize a timer var imgSub = 0; //Currently displayed image subscript var dotSub = 0; //Currently displayed image dot subscript var temp;
 // Create a document fragment, which has not yet been inserted into the DOM structure const frag = document.createDocumentFragment()
 // Add corresponding dots to the document fragment according to the number of pictures for (let i = 0; i < len; i++) {
  const dot = document.createElement("li");
  dot.className = 'quiet';
  // Insert into the document fragment first frag.appendChild(dot);
 }
 //Insert the dots fragments into the DOM structure uniformly dots.appendChild(frag)
 // The first dot is highlighted dots.children[0].className = "active";
 // Sliding function function Roll(distance) { //Parameter distance: the target point of the scroll (must be a multiple of the image width)
  clearInterval(imgs.timer); //Each time you run this function, you must clear the previous timer!
  //Determine the direction of the image movement var speed = imgs.offsetLeft < distance ? rate : (0 - rate);
  //Set the timer to call the anonymous function every 10 milliseconds imgs.timer = setInterval(function() {
   //The scrolling location for each call (speed is speed px/10 ms)         
   imgs.style.left = imgs.offsetLeft + speed + "px";
   //The remaining px value from the target point var leave = distance - imgs.offsetLeft;
   /*Processing when approaching the target point, directly reach the target when scrolling close to it, to avoid the inability to fully display the image when the rate value is set improperly*/
   if (Math.abs(leave) <= Math.abs(speed)) {
    clearInterval(imgs.timer);
    imgs.style.left = distance + "px";
   }
  }, 10);
 }
 /*Clone the first li to the end of the list*/
 imgs.appendChild(imgs.children[0].cloneNode(true));
 function autoRun() {
  imgSub++;
  dotSub++;
  if (imgSub > len) { //After scrolling the cloned items, imgs.style.left = 0; //Change left to the real first item imgSub = 1; //Start displaying from the second item}
  // Call the scroll function, the parameter is the scroll distance of the subscript Roll(-imgSub * width);
  // If the dot index has scrolled to the end, reset the index to 0
  if (dotSub > len - 1) { //Judge whether it has reached the last dot dotSub = 0;
  }
  // Loop to modify the default styles of all dots for (var i = 0; i < len; i++) {
   dots[i].className = "quiet";
  }
  // Add highlight style to the dot currently scrolled to dotss[dotSub].className = "active";
 }
 // Create a timer to start automatic scrolling timer = setInterval(autoRun,2000);
 // Loop to add small dots trigger event for (var i = 0; i < len; i++) {
  dots[i].index = i;
  dots[i].onmouseover = function() {
   for (var j = 0; j < len; j++) {
    dots[j].className = "quiet";
   }
   this.className = "active";
   temp = dotSub;
   imgSub = dotSub = this.index;
   times = Math.abs(this.index - temp); //Distance from the previous dot rate = rate * times; //Change the switching rate according to the distance Roll(-this.index * width);
   rate = 15;
  }
 }
 // Add event: when the mouse moves over the wrapper, the left and right toggle buttons are displayed wrapper.onmouseover = function() {
  clearInterval(timer);
  btns.style.display = 'block';
 }
 // Add event: when the mouse moves out of the wrapper, the left and right toggle buttons are hidden wrapper.onmouseout = function() {
  timer = setInterval(autoRun,2000);
  btns.style.display = 'none';
 }
 // Click the previous button to trigger the event btns.children[0].onclick = function() {
  imgSub--;
  dotSub--;
  if (imgSub < 0) { //After scrolling the first item imgs.style.left = -len * width + "px"; //Change left to the first cloned item imgSub = dotSub = len - 1;
  }
  Roll(-imgSub * width);
  if (dotSub < 0) {
   dotSub = len - 1;
  }
  for (var i = 0; i < len; i++) {
   dots[i].className = "quiet";
  }
  dotss[dotSub].className = "active";
 }
 // Click the next button to trigger the event btns.children[1].onclick = autoRun;
</script>

picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS implements multiple tab switching carousel
Native JavaScript to achieve the effect of carousel
js to achieve a simple carousel effect
JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)
js to implement the complete code of the carousel
Sample code for implementing carousel with native js
js to achieve the effect of supporting mobile phone sliding switch carousel picture example
JS carousel diagram implementation simple code
js to achieve click left and right buttons to play pictures
JavaScript implementation of carousel example

<<: Example of cross-database query in MySQL

>>: Detailed analysis and usage of tcpdump command under Linux