JavaScript implements circular carousel

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

Case demonstration:

1. Click the icon below to rotate the pictures
2. After the pictures are rotated, rotate to the first picture (detailed explanation inside the code)

Project structure diagram:

HTML code:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Image carousel example</title>
 <link rel="stylesheet" href="css/lunbo.css" />
 <script src="js/tools.js"></script>
 <script src="js/lunbo.js"></script>
</head>
<body>
 <!-- Outer container -->
 <div id="outer">
  <!-- Image List-->
  <ul id="img-list">
   <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>
   <!-- Repeat the display of the first picture to facilitate the next cycle. -->
   <li><img src="img/1.jpg" /></li>
  </ul>
  <!-- Navigation buttons -->
  <div id="nav-btns">
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
  </div>
 </div>
</body>
</html>

CSS code:

* {
 margin: 0;
 padding: 0;
}

/*
 * Set the style of outer */
#outer {
 /*Set width and height*/
 width: 520px;
 height: 333px;
 /*Center*/
 margin: 50px auto;
 /*Set background color*/
 background-color: orange;
 /*Set padding*/
 padding: 10px 0;
 /*Enable relative positioning*/
 position: relative;
 /*Crop overflowing content*/
 overflow: hidden;
}

/*Set the picture list*/
#img-list {
 /*Remove bullet points*/
 list-style: none;
 /*Set the width of ul*/
 /*width: 2600px;*/
 /*Enable absolute positioning*/
 position: absolute;
 /*Set the offset (every 520px to the left, the next picture will be displayed)*/
 left: 0px;
}

/*Set the li in the picture*/
#img-list li {
 /*Set float*/
 float: left;
 /*Set left and right margins*/
 margin: 0 10px;
}

/*Set navigation buttons*/
#nav-btns {
 /*Enable absolute positioning*/
 position: absolute;
 /*Set position*/
 bottom: 15px;
}

#nav-btns a {
 /*Set hyperlink floating*/
 float: left;
 /*Set the width and height of the hyperlink*/
 width: 15px;
 height: 15px;
 /*Set background color*/
 background-color: red;
 /*Set left and right margins*/
 margin: 0 5px;
 /*Set transparency*/
 opacity: 0.5;
 /*Compatible with IE8 transparent*/
 filter: alpha(opacity=50);
}

/*Set the mouse input effect*/
#nav-btns a:hover {
 background-color: black;
}

lunbo.js code

window.onload = function() {
 // Get the image list var imgList = document.getElementById("img-list");
 // Get all img tags in the page var imgArr = document.getElementsByTagName("img");
 // Set the width of imgList imgList.style.width = 520 * imgArr.length + "px";

 // Set the navigation button to the center // Get the navigation button var navBtns = document.getElementById("nav-btns");
 // Get outer
 var outer = document.getElementById("outer");
 // Set the left value of navBtns navBtns.style.left = (outer.offsetWidth - navBtns.offsetWidth) / 2 + "px";

 // The default display image index var index = 0;
 // Get all a
 var allA = document.getElementsByTagName("a");
 // Set the default selected effect allA[index].style.backgroundColor = "black";

 /*
  * Click on the hyperlink to switch to the specified image * Click on the first hyperlink to display the first image * Click on the second hyperlink to display the second image * */

 // Bind click response functions to all hyperlinks for (var i = 0; i < allA.length; i++) {
  // Add a num attribute to each hyperlink allA[i].num = i;

  // Bind click response function to hyperlink allA[i].onclick = function() {
   // Turn off the automatic switching timer clearInterval(timer);
   
   // Get the index of the clicked hyperlink and set it to index
   index = this.num;

   // Set the selected a
   setA();

   // Use the move function to switch images move(imgList, "left", -520 * index, 20, function() {
    // After the animation is executed, turn on automatic switching autoChange();
   });
  };
 }

 // Turn on automatic image switching autoChange();

 // Set the selected a
 function setA() {
  // Determine whether the current index is the last image if (index >= imgArr.length - 1) {
   // Set index to 0
   index = 0;

   // The last picture displayed at this time, and the last picture is exactly the same as the first one // Use CSS to switch the last picture to the first one imgList.style.left = 0;
  }

  // Traverse all a and set their background color to red for (var i = 0; i < allA.length; i++) {
   allA[i].style.backgroundColor = "";
  }

  // Set the selected a to black allA[index].style.backgroundColor = "black";
 };

 // Define an automatic switching timer identifier var timer;
 // Create a function to enable automatic image switching function autoChange() {
  // Start a timer to switch pictures at regular intervals timer = setInterval(function() {
   //Increment the index index++;

   // Determine the value of index index %= imgArr.length;

   // Execute animation, switch pictures move(imgList, "left", -520 * index, 20, function() {
    // Modify the navigation button setA();
   });
  }, 3000);
 }

};

tool.js code:

/*
 * Create a function that can perform a simple animation * Parameters:
 * obj: the object to be animated * attr: the style to be animated, for example: left top width height
 * target: the target position of the animation * speed: the speed of movement (positive numbers move right, negative numbers move left)
 * callback: callback function, this function will be executed after the animation is completed*/
function move(obj, attr, target, speed, callback) {
 // Close the previous timer clearInterval(obj.timer);

 // Get the current position of the element var current = parseInt(getStyle(obj, attr));

 // Determine the positive and negative value of speed // If it moves from 0 to 800, the speed is positive // If it moves from 800 to 0, the speed is negative if (current > target) {
  //The speed should be a negative value at this time speed = -speed;
 }

 // Start a timer to perform the animation effect // Add a timer property to the object that performs the animation to save its own timer identifier obj.timer = setInterval(function() {
  // Get the original left value of box1 var oldValue = parseInt(getStyle(obj, attr));

  //Increase the old value var newValue = oldValue + speed;

  // Determine whether newValue is greater than 800
  // Move from 800 to 0 // When moving to the left, you need to determine whether newValue is less than target
  // When moving to the right, you need to determine whether newValue is greater than target
  if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
   newValue = target;
  }

  // Set the new value to box1
  obj.style[attr] = newValue + "px";

  // When the element moves to 0px, stop the animation if (newValue == target) {
   // Reach the goal, turn off the timer clearInterval(obj.timer);
   // After the animation is executed, call the callback function callback && callback();
  }

 }, 30);
}

/*
 * Define a function to get the current style of the specified element * Parameters:
 * obj The element to get the style of * name The name of the style to get */
function getStyle(obj, name) {
 if (window.getComputedStyle) {
  // Normal browser method, with getComputedStyle() method return getComputedStyle(obj, null)[name];
 } else {
  // IE8 method, no getComputedStyle() method return obj.currentStyle[name];
 }
}

/*
 * Define a function to add a specified class attribute value to an element * Parameters:
 * obj The element to which the class attribute is to be added* cn The class value to be added*/
function addClass(obj, cn) {
 // Check if obj contains cn
 if (!hasClass(obj, cn)) {
  obj.className += " " + cn;
 }
}

/*
 * Determine whether an element contains a specified class attribute value.
 * If the class exists, return true, otherwise return false.
 */
function hasClass(obj, cn) {
 // Determine whether there is a cn class in obj
 // Create a regular expression var reg = new RegExp("\\b" + cn + "\\b");
 return reg.test(obj.className);
}

/*
 * Delete the specified class attribute from an element */
function removeClass(obj, cn) {
 // Create a regular expression var reg = new RegExp("\\b" + cn + "\\b");
 // Delete the class
 obj.className = obj.className.replace(reg, "");
}

/*
 * toggleClass can be used to toggle a class * If the element has the class, remove it * If the element does not have the class, add it */
function toggleClass(obj, cn) {
 //Judge whether obj contains cn
 if (hasClass(obj, cn)) {
  //If yes, delete removeClass(obj, cn);
 } else {
  //If not, add addClass(obj, cn);
 }
}

Image resources below:

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:

Do you know all 24 methods of JavaScript loop traversal?
Detailed discussion of the differences between loops in JavaScript
JavaScript event loop case study
Summary of the use of three for loop statements in JavaScript (for, for...in, for...of)
Analysis of the event loop mechanism of js
How many common loops do you know about array traversal in JS?
Detailed explanation of various loop speed tests in JS that you don’t know
Detailed explanation of loop usage in javascript examples

<<: How to configure Nginx virtual host in CentOS 7.3

>>: Solution to the problem that the InnoDB engine is disabled when MySQL is started