Implementing a simple carousel based on JavaScript

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

js carousel implementation ideas

1. First get the left and right buttons of the element box
2. Display/hide the left and right buttons when the mouse passes over
3. Dynamically generate small circles and add custom attributes
4. Add the current class name to the small circle click event
5. Add animation event animate equals - index number * focusWidth
6. Clone the first picture to the end
7. Add right/left button click events
8. Set the timer to manually call the right button click event

HTML code part

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="css/index.css" >
 <script src="js/index.js"></script>
</head>

<body>
 <div class="focus">
 <a href="javascript:;" class="arrow_r">></a>
 <a href="javascript:;" class="arrow_l">
  <</a>
  <ul>
   <li>
   <a href=""><img src="images/focus.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus1.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus2.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus3.jpg" alt=""></a>
   </li>
  </ul>
  <ol class="circle">
  </ol>
 </div>
</body>

</html>

CSS style part

* {
 padding: 0;
 margin: 0;
 }
 
 li {
 list-style: none;
 }
 
 img {
 border: 0;
 vertical-align: top;
 }
 
 a {
 text-decoration: none;
 }
 
 .focus {
 position: relative;
 width: 721px;
 height: 455px;
 margin: 100px auto;
 overflow: hidden;
 }
 
 .focus ul {
 position: absolute;
 top: 0;
 left: 0;
 width: 600%;
 }
 
 .focus ul li {
 float: left;
 }
 
 .arrow_r,
 .arrow_l {
 display: none;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 40px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 font-size: 24px;
 background: rgba(0, 0, 0, .2);
 color: #fff;
 z-index: 1;
 }
 
 .arrow_r {
 right: 0;
 }
 
 .circle {
 position: absolute;
 bottom: 10px;
 left: 50px;
 }
 
 .circle li {
 float: left;
 width: 8px;
 height: 8px;
 border: 2px solid rgba(255, 255, 255, .5);
 border-radius: 50%;
 margin: 0 3px;
 cursor: pointer;
 }
 
 .current {
 background-color: #fff;
 }

JavaScript part

window.addEventListener('load', function() {
 //Get the element var focus = document.querySelector('.focus');
 var arrow_r = document.querySelector('.arrow_r');
 var arrow_l = document.querySelector('.arrow_l');
 var focusWidth = focus.offsetWidth;
 // When the mouse passes through the focus box, the left and right buttons are displayed/hidden and the carousel is paused focus.addEventListener('mouseenter', function() {
 arrow_r.style.display = 'block';
 arrow_l.style.display = 'block';
 clearInterval(timer);
 timer = null;
 });
 focus.addEventListener('mouseleave', function() {
 arrow_r.style.display = 'none';
 arrow_l.style.display = 'none';
 timer = setInterval(function() {
  //Call click event arrow_r.click();
 }, 2000);
 });
 //Dynamically generate small circles var ul = focus.querySelector('ul');
 var ol = focus.querySelector('.circle');
 for (var i = 0; i < ul.children.length; i++) {
 var li = document.createElement('li');
 li.setAttribute('index', i);
 ol.appendChild(li);
 //Small circle click event li.addEventListener('click', function() {
  for (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
  }
  var index = this.getAttribute('index');
  num = index;
  circle = index;
  this.className = 'current';
  animate(ul, -index * focusWidth);
 })
 }
 ol.children[0].className = 'current';
 //Clone the first picture and put it in the last one var fis = ul.children[0].cloneNode(true);
 ul.appendChild(fis);
 //Right button click event var num = 0;
 var circle = 0;
 arrow_r.addEventListener('click', function() {
 if (num === ul.children.length - 1) {
  ul.style.left = 0;
  num = 0;
 }
 num++;
 animate(ul, -num * focusWidth);
 circle++;
 if (circle === ul.children.length - 1) {
  circle = 0;
 }
 for (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
 }
 ol.children[circle].className = 'current';
 });
 //Left button click event arrow_l.addEventListener('click', function() {
 if (num == 0) {
  num = ul.children.length - 1;
  ul.style.left = -num * focusWidth + 'px';

 }
 num--;
 animate(ul, -num * focusWidth);
 circle--;
 circle = circle < 0 ? ol.children.length - 1 : circle;
 //Call function circleChange();
 });
 //Clear the current class name of the remaining small circles function circleChange() {
 for (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
 }
 //Leave the current class name of the current small circle ol.children[circle].className = 'current';
 }
 //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);
  callback && callback();
  }
  obj.style.left = obj.offsetLeft + step + 'px';

 }, 15);
 }
 //Automatically play the carousel var timer = setInterval(function() {
 //Call click event arrow_r.click();
 }, 2000);
});

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: