Implementing a simple carousel based on JavaScript

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:
  • JavaScript implements circular carousel
  • Several methods of implementing carousel images in JS
  • js to write the carousel effect
  • JavaScript imitates Jingdong carousel effect
  • JavaScript Dom implements the principle and example of carousel
  • Native js to achieve seamless carousel effect
  • js to achieve mobile carousel sliding switch
  • javascript to realize the scroll wheel carousel picture
  • Sample code for a simple seamless scrolling carousel implemented with native Js

<<:  How to periodically clean up images that are None through Jenkins

>>:  How to solve the 2002 error when installing MySQL database on Alibaba Cloud

Recommend

Example code for css3 to achieve scroll bar beautification effect

The specific code is as follows: /*Scroll bar wid...

Sample code for modifying the input prompt text style in html

On many websites, we have seen the input box disp...

The difference between the name and id of the a tag's target pointing to the iframe

Copy code The code is as follows: <iframe id=&...

Detailed explanation of the principle of distributed locks and three implementation methods

Currently, almost all large websites and applicat...

How to debug loader plugin in webpack project

Recently, when I was learning how to use webpack,...

Vue implements countdown between specified dates

This article example shares the specific code of ...

HTML Tutorial: title attribute and alt attribute

XHTML is the basis of CSS layout. jb51.net has al...

JS removeAttribute() method to delete an attribute of an element

In JavaScript, use the removeAttribute() method o...

Introduction to Common XHTML Tags

<br />For some time, I found that many peopl...

MySQL database optimization: index implementation principle and usage analysis

This article uses examples to illustrate the prin...

Vue implements form validation function

This article mainly describes how to implement fo...

MySQL Billions of Data Import, Export and Migration Notes

I have been taking a lot of MySQL notes recently,...

MySQL 5.7.17 installation tutorial with solutions to the problem that the MySQL service cannot be started

For .net development, I am more familiar with Mic...

Solution to nginx hiding version number and WEB server information

Nginx can not only hide version information, but ...

td width problem when td cells are merged

In the following example, when the width of the td...