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

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

Recommend

Tomcat's method of setting ports through placeholders (i.e. parameter specification method)

For work needs, I found a lot of information on t...

Mysql uses the kill command to solve the deadlock problem (kill a certain SQL statement being executed)

When using MySQL to run certain statements, a dea...

The problem of mmx64.efi not found occurs when installing Ubuntu18 dual system on win10

During the installation of Ubuntu 18, the mmx64.e...

MySQL SQL statement method to hide the middle four digits of the mobile phone number

First query table structure (sys_users): SELECT *...

Using Docker run options to override settings in the Dockerfile

Usually, we first define the Dockerfile file, and...

Implementation of mounting NFS shared directory in Docker container

Previously, https://www.jb51.net/article/205922.h...

How to deploy Tencent Cloud Server from scratch

Since this is my first post, if there are any mis...

Notes on upgrading to mysql-connector-java8.0.27

Recently, an online security scan found a vulnera...

mysql5.7 installation and configuration tutorial under Centos7.3

This article shares the MySQL 5.7 installation an...

How to pass the value of the select drop-down box to the id to implement the code

The complete code is as follows : HTML code: Copy ...

MySQL statement execution order and writing order example analysis

The complete syntax of the select statement is: S...

Web page custom selection box Select

Everyone may be familiar with the select drop-dow...

HTML Web Page List Tags Learning Tutorial

HTML web page list tag learning tutorial. In HTML ...

Linux uses the scp command to copy files to the local computer and copy local files to the remote server

As shown below: Copy the remote server's file...

Set the width of the table to be fixed so that it does not change with the text

After setting the table width in the page to width...