js to realize the production method of carousel

This article shares the specific code for js to realize the display of carousel pictures for your reference. The specific content is as follows

The effect is as shown in the figure

The code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  
  <style type="text/css">
   
   * {
    padding: 0;
    margin: 0;
   }
   .container {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 30px auto;
    overflow: hidden;
   }
       .left {
     display: none;
     position: absolute;
     top: 50%;
     left: -20px;
     transform: translateY(-50%);
     width:50px;
     height: 50px;
     border-top-right-radius: 50%;
     border-bottom-right-radius: 50%;
     background-color: rgba(0,0,0,0.5);
     z-index: 999;
    }
    .left i {
    display: block;
       margin-top: 10px;
    margin-left: 20px;
    width: 30px;
    height: 30px;
    background: url(img/left.png) no-repeat;
    background-size: 30px 30px;
    }
   .right {
    display: none;
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width:50px;
    height: 50px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
   }
   .right i {
     display: block;
     margin-top: 10px;
     margin-right: 20px;
     width: 30px;
     height: 30px;
     background: url(img/right.png) no-repeat;
     background-size: 30px 30px;
    }
   
   ul li,ol li {
    list-style: none;
   }
   .picture {
    position: absolute;
   }
   .list {
    position: absolute;
    bottom: 10px;
    left: 10px;
   }
      .list li {
    float: left;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
   }
   .list .current {
    background-color: #fff;
   }
   .picture li {
    position: absolute;
    width: 600px;
    height: 300px;
   }
   img {
    width: 100%;
    height: 100%;
   }
   
  </style>
 </head>
 <body>
  <div class="container">
   <span class="left"><i></i></span>
   <span class="right"><i></i></span>
   <ul class="picture">
    <li><img src="img/1.jpg" ></li>
    <li><img src="img/2.jpg" ></li>
    <li><img src="img/3.jpg" ></li>
    <li><img src="img/4.jpg" ></li>
    <li><img src="img/5.jpg" ></li>
   </ul>
   <ol class="list">
   </ol>
  </div>
  <script type="text/javascript">
   var picture = document.querySelector('.picture');
   var list = document.querySelector('.list');
   var num=0;
   var circle=0;
   for (i=0;i<picture.children.length;i++)
   {   
    // Set the position of the picture picture.children[i].style.left = i*600 + 'px';
    // Automatically generate an ordered list var li = document.createElement('li');
    li.setAttribute('index',i);
    
    list.appendChild(li);
    // Add a click event to li li.addEventListener('click',function () {
     for (var i=0;i<list.children.length;i++) {
      list.children[i].className = '';
     }
     this.className = 'current';
     var index = this.getAttribute('index');
     num = index;
     circle = index;
     animate(picture,-index*600);
    })
   }
   // Set the class name of the first ol child list.children[0].className = 'current';
   var left = document.querySelector('.left');
   var right = document.querySelector('.right');
   var container = document.querySelector('.container');
   // Set the mouse to leave the event container.addEventListener('mouseover',function () {
    left.style.display = 'block';
    right.style.display = 'block';
    clearInterval(timer)
    timer = null;
   })
   container.addEventListener('mouseleave',function () {
    left.style.display = 'none';
    right.style.display = 'none';
    timer = setInterval(function () {
     right.click();
    },1000);
   })
   
   // js animation function function animate (obj, target, callback) {
    clearInterval(obj.timer) 
    obj.timer = setInterval(function () {
     var step = (target - obj.offsetLeft)/10;
     step = step > 0 ? Math.ceil(step) : Math.floor(step);
     if(obj.offsetLeft == target) {
      clearInterval(obj.timer);
      if (callback) {
       callback();
      }
     }
     obj.style.left = obj.offsetLeft + step + 'px';
    },15)
   }
   
   var first = picture.children[0].cloneNode(true);
   picture.appendChild(first);
   picture.lastChild.style.left = (picture.children.length-1)*600 + 'px';
   //Right click eventright.addEventListener('click',function () {
    if (num==picture.children.length-1) {
     picture.style.left = 0;
     num = 0;
    }
    num++;
    animate(picture,-num*600);
    circle ++;
    if (circle == list.children.length) {
     circle = 0;
    }
    
    for (var i = 0;i<list.children.length;i++) {
     list.children[i].className = '';
    }
    list.children[circle].className = 'current';
   })
   // Left click event left.addEventListener('click',function () {
    if (num==0) {
     picture.style.left = -(picture.children.length-1)*600 +'px';
     num = picture.children.length-1;
    }
    num--;
    animate(picture,-num*600);
    circle --;
    if (circle < 0) {
     circle = list.children.length-1;
    }
    
    for (var i = 0;i<list.children.length;i++) {
     list.children[i].className = '';
    }
    list.children[circle].className = 'current';
   })
   
   var timer = setInterval(function () {
    // Manually call right.click();
   },1000);
  </script>
 </body>
</html>

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 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
JS realizes automatic carousel effect (adaptive screen width + mobile phone touch screen sliding)
JS implements left and right seamless carousel code
Use html+js+css to achieve page carousel effect (example explanation)
Native js to achieve infinite loop carousel effect
js realizes the sliding carousel effect from left to right

<<: Two ways to install Python3 on Linux servers

>>: MySQL 8.0.15 installation and configuration graphic tutorial and password change under Linux