JavaScript Dom implements the principle and example of carousel

If we want to make a carousel, we must first understand its principle. How can we make the picture slide from right to left?
Let's think about something similar in life, like movie film.
We can create a block as the projection area, create a list as the negative and move it to the left to achieve the effect of a carousel.

Create a block and list

Create a block to serve as the overall container and display area.

<div id="out">
 <ul id="imgList">
 <li><img src="pto/many.jpg" ></li>
 <li><img src="pto/hello.jpg" ></li>
 <li><img src="pto/timg.jpg" ></li>
 <li><img src="pto/zhenjing.jpg"></li>
 </ul>
</div>

Now the pictures are stacked vertically in a column, and I don’t know where the blocks are. Let’s add some styles.

Turn on positioning and center it, make the block larger and add a background to determine the position (the image in this experiment has a uniform aspect ratio of 500*431, so the div aspect ratio is 520*451)

Remove the default list style and make the list display horizontally

*{
 margin: 0;
 padding: 0;
 }
 #out{
  width:520px;
  height:451px ;
  background-color: #00bcd4;
 position: relative;
 margin: 50px auto;
 /*overflow: hidden;*/
 /*Cut out the parts we don't need and comment them out for easy debugging*/
 }

 #imgList{
  list-style: none;
  position: absolute;
  /* left: -520px; */
 }
 #imgList li{
  float:left;
  margin: 10px;
}

After trying to float, the pictures are still in one column because the width of lu is too small to fit, so we need to expand it, but we can't directly determine its width because as the number of pictures increases, the width should continue to increase, so we use JavaScript to solve the width. Each time a picture is added, the width is expanded by 520px.

window.onload = function () {
 // Dynamic ul length var imgList = document.getElementById("imgList");
 var imgArr = document.getElementsByTagName("img");
 imgList.style.width=520*imgArr.length+"px";
 }//onload

Now, the film ul that loads the picture will change a picture every time it shifts to the left by -520px

Navigation Bar

The carousel images will be changed periodically, but it is possible that the images have been changed just when your customers are attracted. If you want your customers to come back staring at the images dryly, you are likely to lose her.
Therefore, a complete carousel also requires a button or a navigation bar that can manually switch between the previous and next pages.
We use several hyperlinks to complete the task here

<div id="navDiv">
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
</div>

ul is out of the document flow after absolute positioning is enabled. Now our navigation is shrunk into a ball in the upper left corner because there is no content. We need to separate each hyperlink from each other, manually expand the space, and adjust it to the lower position. The lower center or right side is a better choice.
Adjusting the transparency reduces the attractiveness of the navigation, after all, the picture is the theme.
In order to facilitate expansion, we still have to use js to solve the position adjustment.

 }
 #navDiv{
  position: absolute;
  bottom: 15px;
 }
 #navDiv a{
  float: left;
  width: 15px;
  height: 15px;
  background-color: #89ff00;
  margin: 0 5px;
  opacity: 0.5;
 }

//Dynamic navigation center var navDiv = document.getElementById("navDiv");
 var out = document.getElementById("out");
 
 // Divide the remaining vertical distance to the left and right of the navigation to achieve the centering effect // If it is not divided by two, it will become right-aligned // Don't forget the unit, um. . Maybe I'm the only one who forgot navDiv.style.left = (out.clientWidth - navDiv.clientWidth)/2+"px";

Improved navigation function

What kind of feedback should a 15px square give to users?
The current image location, when the mouse moves to the navigation, feedback information should be provided to tell the user that it can be clicked, and clicking the navigation can switch images.

#navDiv a:hover{
  background-color: red;
  /* Mouse move effect*/
 /* Inline styles have a high priority, be careful not to be overwritten and invalidated*/
 }

//Positioning effect var allA = document.getElementsByTagName("a");
var index = 0;
 allA[index].style.backgroundColor="black";

 //Click navigation effect //Use block-level scope let, otherwise i will be the same number for(let i=0;i<allA.length;i++){
  allA[i].onclick=function () {
  imgList.style.left=-520*i+"px";

  //Clear inline styles so that the css file can take effect allA[index].style.backgroundColor="";
  index=i;
  allA[index].style.backgroundColor="black";
  }
 }

Animation effects

Why do animation? (Because it's cool (≧ω≦*)♪)

Because without the carousel effect, it is not called a carousel. Obviously, it can be completed by changing the address. Isn’t it just for this that you have been busy for a long time? I use the biggest title to tell you that animation is the essence of the carousel.

The main idea is to use the timer to complete an effect that was originally completed in one step multiple times, and turn off the timer when it reaches the specified position.

Issues to note

Each moving distance may be divided by the image size, resulting in an inaccurate stopping position (greater or less than) or failure to stop (failure to reach the stopping position exactly). Small errors will gradually accumulate.
Close the previous timer before opening the timer, otherwise clicking another timer before one animation is completed will cause a ghost effect

 //Click navigation effect for(let i=0;i<allA.length;i++){
  allA[i].onclick=function () {
  move(imgList,-520*i,10);
  // imgList.style.left=-520*i+"px";
  //Replace this low-level transition allA[index].style.backgroundColor="";
  index=i;
  allA[index].style.backgroundColor="black";
  }
 }
 
function move(obj,target,speed) {//element; target position; speed//Close the previous timer each time an event is triggered//This is the key point, you can remove this sentence and click to turn off the difference effect at will clearInterval(obj.timer);
  
  var current = parseInt(window.getComputedStyle(obj,null).left);
  //Get the current position //Determine the direction of movement if (target < current) {
  speed = -speed;
  }
  //Timer flag obj.timer = window.setInterval(function () {
  //m starts to get the current position every time var oldValue = parseInt(window.getComputedStyle(obj,null).left);
  //Move and stop at the specified position var newValue = oldValue + speed;
  //Adjust the stop position. Small errors will be infinitely magnified over time if((speed < 0 && newValue < target)||(speed > 0 && newValue > target)){
   newValue = target;
  }
  imgList.style.left =newValue+"px";
  if(newValue == target){
   clearInterval(obj.timer);
  }

  },30);

 }

change();
 //Automatic carousel //A timer is used to call function change() {
  setInterval(function () {
  index++;
  index=index % imgArr.length;
  console.log(imgArr.length);
  console.log(index);
  move(imgList,-520*index,20);
  for(let i=0;i<allA.length;i++){
   allA[i].style.backgroundColor="";
   allA[index].style.backgroundColor="black";
  }
  },3000);
 }

This can already achieve the basic function of the carousel, but when the last picture switches to the first picture, all the pictures will be pulled to the left, which is very uncool. What should we do if we want the carousel to continue to cycle to the left?

Suppose we want to rotate two images, image a and image b.

We can insert a picture like picture a at the end. After the two pictures are finished rotating, we will switch to the third picture to make people mistakenly think it is the first picture. After the third picture is finished rotating, we will instantly jump to the first picture and continue rotating. This is a trick to deceive people.

For the carousel, we actually only need to know the principle, not to mention the framework. It takes less than one tenth of the effort to complete the carousel with jQuery.

Complete code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
  margin: 0;
  padding: 0;
 }
 #out{
  width:520px;
  height:451px ;
  margin: 50px auto;
  background-color: #00bcd4;
  position: relative;
  overflow: hidden;
 }

 #imgList{
  list-style: none;
  position: absolute;
 }
 #imgList li{
  float:left;
  margin: 10px;
 }
 #navDiv{
  position: absolute;
  bottom: 15px;
 }
 #navDiv a{
  float: left;
  width: 15px;
  height: 15px;
  background-color: #89ff00;
  margin: 0 5px;
  opacity: 0.5;


 }
 #navDiv a:hover{
  background-color: red;
 /* Inline styles have a high priority and will become invalid after being triggered once*/
 }

 </style>
</head>
<body>
<div id="out">
 <ul id="imgList">
 <li><img src="pto/many.jpg" ></li>
 <li><img src="pto/hello.jpg" ></li>
 <li><img src="pto/timg.jpg" ></li>
 <li><img src="pto/zhenjing.jpg"></li>
 <li><img src="pto/many.jpg" ></li>
 </ul>
 <div id="navDiv">
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 </div>
</div>
<script>
 window.onload = function () {
 // Dynamic ul length var imgList = document.getElementById("imgList");
 var imgArr = document.getElementsByTagName("img");
 imgList.style.width=520*imgArr.length+"px";

 //Dynamic navigation center var navDiv = document.getElementById("navDiv");
 var out = document.getElementById("out");
 navDiv.style.left = (out.clientWidth - navDiv.clientWidth)/2+"px";

 //Positioning effect var allA = document.getElementsByTagName("a");
 var index = 0;
 allA[index].style.backgroundColor="black";

 //Click navigation effect for(let i=0;i<allA.length;i++){
  allA[i].onclick=function () {
  move(imgList,-520*i,20);
  setA();
  // imgList.style.left=-520*i+"px";
  // allA[index].style.backgroundColor="";
  // index=i;
  // allA[index].style.backgroundColor="black";
  }
 }

 // animation effect function move(obj,target,speed,callback) {//element; target position; speed; callback function clearInterval(obj.timer);
  var current = parseInt(window.getComputedStyle(obj,null).left);
  //Get the current position //Determine the direction of movement if (target < current) {
  speed = -speed;
  }
  //Timer flag obj.timer = window.setInterval(function () {
  //m starts getting the position every time var oldValue = parseInt(window.getComputedStyle(obj,null).left);
  //Move and stop at the specified position var newValue = oldValue + speed;
  //Adjust the stop position. Small errors will be infinitely magnified over time if((speed < 0 && newValue < target)||(speed > 0 && newValue > target)){
   newValue = target;
  }
  imgList.style.left =newValue+"px";
  if(newValue == target){
   clearInterval(obj.timer);
   callback();
  }

  },30);

 }
 change();
 //Automatic carousel //A timer is used to call function change() {
  setInterval(function () {
  index++;
  index=index % imgArr.length;
  move(imgList,-520*index,20,function () {
   if(index>=imgArr.length-1 ){
   imgList.style.left =0;
   }
   setA();
  });

  },3000);
 }
 function setA() {
  for(let i=0;i<allA.length;i++){
  allA[i].style.backgroundColor="";
  allA[index].style.backgroundColor="black";

  }
 }
 }//onload
</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:

JavaScript implements circular carousel
Several methods of implementing carousel images in JS
js to write the carousel effect
Implementing a simple carousel based on JavaScript
JavaScript imitates Jingdong carousel effect
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

<<: A brief discussion on the problem of forgotten mysql password and login error

>>: How to filter out certain libraries during mysql full backup

The difference between distinct and group by in MySQL

JavaScript Dom implements the principle and example of carousel

Create a block and list

Navigation Bar

Improved navigation function

Animation effects

Complete code

The difference between distinct and group by in MySQL

List of commonly used escape codes for HTML greater than, less than, spaces, quotation marks, etc.

Detailed steps to install nginx on Apple M1 chip and deploy vue project

Web design tips on form input boxes

Detailed explanation of the use of the clip-path property in CSS

Mac node deletion and reinstallation case study

MySQL log settings and viewing methods

Summary of essential knowledge points for MySQL query optimization

A brief introduction to the differences between HTML and XHTML, and HTML4 and HTML5 tags

js realizes the dynamic loading of data by waterfall flow bottoming out

Recommend

Use prometheus to count the remaining available percentage of MySQL auto-increment primary keys

Sample code for generating QR code using js

Detailed explanation of MySQL joint query optimization mechanism

Solve the problem that Docker pulls MySQL image too slowly

SQL ROW_NUMBER() and OVER() method case study

Javascript to achieve the drag effect of the login box

Vue uses element-ui to implement menu navigation

Priority analysis of and or queries in MySQL

Sample code for implementing mobile expansion and collapse effects with pure CSS3

A brief discussion on how to set CSS position absolute relative to the parent element

Understanding of the synchronous or asynchronous problem of setState in React

Native JS to achieve image marquee effects

MySQL 5.7.17 winx64 decompression version installation and configuration method graphic tutorial

React non-parent-child component parameter passing example code

Detailed explanation of docker network bidirectional connection