Hand-write a native rotograph

  • Be limited by the framework for a long time, a lot of simple functions with the framework, but the framework has his limitations, this time native JS handwriting a small function is very sweet, but too long useless, and some forgot, so today I intend to handwritten a round diagram, review the use of native JS, and the idea of the round diagram used
  • We’ll review the wheel on the implementation of the principle, with a box to display pictures this box fixed a picture size, out of hiding, the image horizontally arranged, moving in one direction, each moving distance of an image, in this way, although the page is a collection of has many pictures of super long images, but each time the user sees is a picture of a complete, All we need to do is use the timer to control how long and how far the picture moves

Step 1: Build the page document

<div class="all" id='box'>
<! - image - >      <div class="screen">
        <ul>
          <li><img src="./lunboimage/timg1.jpg" width="500" height="200"></li>
 <li><img src="./lunboimage/timg2.jpg" width="500" height="200"></li>  <li><img src="./lunboimage/timg3.jpg" width="500" height="200"></li>  <li><img src="./lunboimage/timg4.jpg" width="500" height="200"></li>  <li><img src="./lunboimage/timg5.jpg" width="500" height="200"></li>  <li><img src="./lunboimage/timg1.jpg" width="500" height="200"></li>  </ul>  <ol> <! - page - > <li class="current">1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  </ol>  </div> <! -- Left and right arrow --> <div id="arr"> <span id="left">&lt; </span><span id="right">&gt; </span> </div>  </div> Copy the code

Summary: divided into three parts, round seeding area, page number area, left and right arrow area

Part TWO: Style areas

* {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
 }   .all {  width: 500px;  height: 200px;  padding: 7px;  border: 1px solid #ccc;  margin: 100px auto;  position: relative;  }   .screen {  width: 500px;  height: 200px;  overflow: hidden;  position: relative;  }   .screen li {  width: 500px;  height: 200px;  overflow: hidden;  float: left;  }   .screen ul {  /* * * * * * * * * *  position: absolute;  left: 0;  top: 0;  /* Be wide enough to fit in a row */  width: 3000px;  }   .all ol {  position: absolute;  right: 10px;  bottom: 10px;  line-height: 20px;  text-align: center;  }   .all ol li {  float: left;  width: 20px;  height: 20px;  background: #fff;  border: 1px solid #ccc;  margin-left: 10px;  cursor: pointer;  }   .all ol li.current {  background: yellow;  }   #arr {  /* display: none; * /  }   #arr span {  width: 40px;  height: 40px;  position: absolute;  left: 5px;  top: 50%;  margin-top: - 20px;  background: #000;  cursor: pointer;  line-height: 40px;  text-align: center;  font-weight: bold;  font-family: 'bold';  font-size: 30px;  color: #fff;  /* Transparent: this means completely transparent */  opacity: 0.3;  border: 1px solid #fff;  }   #arr #right {  /* 5 pixels to the right of the parent */  right: 5px;  /* clears the left value (set to default) */  left: auto;  } Copy the code

Summary: First initialize the style, then make the 5 images in the page horizontally, then set overflow: hidden for the box showing the images, so that only one image can be seen, and the rest are hidden.

Key part: Functional implementation (step-by-step code)

  • Preparations:
 //1 Find the big box
 var box = document.querySelector('#box');
 //2 Find the arrow
 var arr = document.querySelector('#arr');
 Find ul / / 3
 var ul = document.querySelector('ul');  //4 Find the width of the div to put the image  var screenW = document.querySelector('.screen').offsetWidth;  //5. Find all page numbers under ol  var pageList = document.querySelectorAll('ol>li'); Copy the code

Summary: Here we use the DOM’s document type node to get the page node element. We find the box, the left and right arrows, and the box where the image is placed, along with its width, and the collection of all page numbers

  • Function implementation function
 //1 Move animation encapsulation function parameter 1, moving target, parameter 2, moving distance
        function animate(obj, target) {
            // Stop the previous timer first
            clearInterval(obj.timerID);
            obj.timerID = setInterval(function() {
 // To get its current position requires that both the child and parent elements be located (remember)  var current = obj.offsetLeft;  // Move distance minus the current distance, advance 10px each time until reach, then stop the timer  if (Math.abs(target - current) > 10) {  / / step  current += target > current ? 10 : - 10;  // Assign to left  obj.style.left = current + "px";  } else {  obj.style.left = target + "px";  }  if (current == target) {  clearInterval(obj.timerID);  }  }, 10);  };  //2 Next page function  function nextPage() {  // Make a judgment in the next page click event. If it is the last one, flash to the first one with subscript 0  if (index == ul.children.length - 1) {  index = 0;  ul.style.left = 0;  }  // Page number after arrival ++  index++;  // current = -index * screenW;  Parameter 1: which element to move parameter 2: the target position  animate(ul, -index * screenW);  // Let all page numbers be unhighlighted first  for (var i = 0; i < pageList.length; i++) {  pageList[i].className = "";  }  // If it is the last picture (which looks like the first picture)  if (index == ul.children.length - 1) {  // Let the page number with subscript 0 be highlighted  pageList[0].className = "current";  } else {  // Highlight the page number of the current image  pageList[index].className = "current";  }  }  //3 Iterate through all page numbers and add click events to them  for (var i = 0; i < pageList.length; i++) {  // First store the subscript on each page number  pageList[i].setAttribute('index', i);  pageList[i].onclick = function() {  // Flash to the first page if the current image is the last  if (index == ul.children.length - 1) {  index = 0;  ul.style.left = 0;  }  // Get the index of the page that was clicked  var idx = this.getAttribute('index');  // If you are currently on the first page and click on the last page number  if (index == 0 && idx == pageList.length - 1) {  // Flash to the last page  index = ul.children.length - 1;  ul.style.left = -index * screenW + "px";  }  // Click on the page number of the subscript to send the corresponding image to the corresponding subscript  animate(ul, -idx * screenW);  // Update the index of the image to the corresponding index  index = idx;  // Remove the highlight  for (var j = 0; j < pageList.length; j++) {  pageList[j].className = "";  }  this.className = "current";  }  } Copy the code

Summary: This step starts with an animation function. Its first argument is the object and its second is the target movement distance, so stop the timer when moving. Then computing, mobile seat in mobile stop first, then waiting for the start of the next timer, and on the next page function is called animation function, use what page corresponding index by width, get the latest coordinates, to the animation function, to note here a last and the first one, and then iterate through all the pages, add the click event for him, Click on one to go to the subscript, and then remove the style exclusively, highlight the current,

  • Effect of functional
        var timerID = setInterval(nextPage, 2200);
        //1 big box mouse move: stop timer, page stop motion
        box.onmouseover = function() {
                // Click the button to hide
                arr.style.display = "block";
 // Stop the timer  clearInterval(timerID);  }  //2 big box mouse out: start the timer, the page began to move  box.onmouseout = function() {  arr.style.display = "none";  timerID = setInterval(nextPage, 2200);  }  // Prepare a variable named index, which starts at 0 by default, because the default is to display images with index 0  var index = 0;  //3 Next page click event: call next page event  document.getElementById('right').onclick = function() {  nextPage();  };  //4 Complete the previous page click event  document.getElementById('left').onclick = function() {  // Make a judgment in the previous page click event, if it is the first page, flash to the last page, and then the last page  if (index == 0) {  // Flash to the last image (that looks like the content of the first image, subscript -1)  index = ul.children.length - 1;  ul.style.left = -index * screenW + "px";  }  index--;  animate(ul, -index * screenW);  // Exclusive, all styles are cancelled  for (var i = 0; i < pageList.length; i++) {  pageList[i].className = "";  }  // If the picture is subscripted, take out the page number of the subscripted number  pageList[index].className = "current";  }; Copy the code

Summary: Think about the logic, call the code implemented above, implement the function

Functional implementation (complete code)

     //！！！！！！！！！！！！！！！ First preparations ！！！！！！！！！！！！

        //1 Find the big box
        var box = document.querySelector('#box');
        //2 Find the arrow
 var arr = document.querySelector('#arr');  Find ul / / 3  var ul = document.querySelector('ul');  //4 Find the width of the div to put the image  var screenW = document.querySelector('.screen').offsetWidth;  //5. Find all page numbers under ol  var pageList = document.querySelectorAll('ol>li');   / /!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Second, the function implementation function!!!!!!!!!!!!!!!!!!!!!   //1 Move animation encapsulation function parameter 1, moving target, parameter 2, moving distance  function animate(obj, target) {  // Stop the previous timer first  clearInterval(obj.timerID);  obj.timerID = setInterval(function() {  // To get its current position requires that both the child and parent elements be located (remember)  var current = obj.offsetLeft;  // Move distance minus current distance, advance 10px each time until reach, then stop the timer  if (Math.abs(target - current) > 10) {  / / step  current += target > current ? 10 : - 10;  // Assign to left  obj.style.left = current + "px";  } else {  obj.style.left = target + "px";  }  if (current == target) {  clearInterval(obj.timerID);  }  }, 10);  };  //2 Next page function  function nextPage() {  // Make a judgment in the next page click event. If it is the last one, flash to the first one with subscript 0  if (index == ul.children.length - 1) {  index = 0;  ul.style.left = 0;  }  / / let index++  index++;  // Assign ul with the latest -subscript * width  // var current = -index * screenW;  // ul.style.left = current + "px";  // Parameter 1: which element to move  // Parameter 2: target location  animate(ul, -index * screenW);  // Let all page numbers be unhighlighted first  for (var i = 0; i < pageList.length; i++) {  pageList[i].className = "";  }  // If it is the last picture (which looks like the first picture)  if (index == ul.children.length - 1) {  // Let the page number with subscript 0 be highlighted  pageList[0].className = "current";  } else {  // Highlight the page number of the current image  pageList[index].className = "current";  }  }  //3 Iterate through all page numbers and add click events to them  for (var i = 0; i < pageList.length; i++) {  // First store the subscript on each page number  pageList[i].setAttribute('index', i);  pageList[i].onclick = function() {  // Flash to the first page if the current image is the last  if (index == ul.children.length - 1) {  index = 0;  ul.style.left = 0;  }  // Get the index of the page that was clicked  var idx = this.getAttribute('index');  // If you are currently on the first page and click on the last page number  if (index == 0 && idx == pageList.length - 1) {  // Flash to the last page  index = ul.children.length - 1;  ul.style.left = -index * screenW + "px";  }  // Click on the page number of the subscript to send the corresponding image to the corresponding subscript  animate(ul, -idx * screenW);  // Update the index of the image to the corresponding index  index = idx;  // Remove the highlight  for (var j = 0; j < pageList.length; j++) {  pageList[j].className = "";  }  this.className = "current";  }  }   //！！！！！！！！！！！！！！ The effect calls the function ！！！！！！！！！！！  var timerID = setInterval(nextPage, 2200);  //1 big box mouse move: stop timer, page stop motion  box.onmouseover = function() {  // Click the button to hide  arr.style.display = "block";  // Stop the timer  clearInterval(timerID);  }  //2 big box mouse out: start the timer, the page began to move  box.onmouseout = function() {  arr.style.display = "none";  timerID = setInterval(nextPage, 2200);  }  // Prepare a variable named index, which starts at 0 by default, because the default is to display images with index 0  var index = 0;  //3 Next page click event: call next page event  document.getElementById('right').onclick = function() {  nextPage();  };  //4 Complete the previous page click event  document.getElementById('left').onclick = function() {  // Make a judgment in the previous page click event, if it is the first page, flash to the last page, and then the last page  if (index == 0) {  // Flash to the last image (that looks like the content of the first image, subscript -1)  index = ul.children.length - 1;  ul.style.left = -index * screenW + "px";  }  index--;  animate(ul, -index * screenW);  // Exclusive, all styles are cancelled  for (var i = 0; i < pageList.length; i++) {  pageList[i].className = "";  }  // If the picture is subscripted, take out the page number of the subscripted number  pageList[index].className = "current";  }; Copy the code

This article was typeset using MDNICE