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: