Native JS Carousel-a minimalist implementation of various effects

Winter vacation continued to touch the fish ~ This is a long time ago, the rewrite of the blog, then or separate writing, where the summary rewrite, just review it again ~

Spring Recruit I come!
All interesting, a brain first throw in the collection, and then no longer see Haha, really bad.
Today, it is easier said than done today.
It wasn't written at markdown the time!
At that time to use Var also need to solve the required problem! And now the use of ES6 let , the sense of self-area is not the same!

<!  DOCTYPE html>

I. What is CAROUSEL?

Carousel is actually a timed-shift AD (card?). Image? )。
In the HTML structure they are actually ul inside li . On the data plane, they're just list a piece of data.

Well, there can be a lot of transformations in this, too-you might know that this vue-swiper gorgeous carousel effect now

• The buffering effect---transparency changes (meaning that at first all are item stacked at first)
• Slide effect---position top position (meaning all item single/vertical/horizontal arrangement)

Two. Changes and the above code analysis---change top to toggle the picture.

As the code above, only a structure, we see the wrap layer is set to 1.position:relative and 2.overflow:hidden , essentially for the sub-layer of pic-group service, we set the sub-layer pic-group for 3.position:absolute , so that 3 can be based on 1 and two to achieve the change of top position ( The top position is n times the height of the picture! )

FOR minimalist!!!!! I only set the width of the. Pic-group li img here. In general, each outer element will write a specific high-wide.

• Why do I give .pic-group li img settings display:block ?

  In fact, img it is an inline element. The inline element has a default 4px margin. There are font-size:0 many ways to remove it, and here I pursue code minimalism. So in a word, turn into a block-level element, Junior.

• Why do I only give .pic-group li img a wide height setting?

  Still for minimalism ~ actually should be set up according to the requirements of the width of the high. The result here is
  A. The inner img width and height inherit the most outward400 250
  =
  B. li then the sub-layer is openli
  =
  C. li continue to open the .pic-group layer
  =
  D. Because .pic-group the height is limited by the boss overflow:hidden , and finally become a picture.
  The original appearance should be several layers of pictures ~

Three. The opportunity to change---who will change top?

We add numbers to our Carousel case, click on the numbers to change the world by clicking on the switch!
First, this is the style we added to the numbers.

.num-group {      position: absolute;      bottom: 0;      right: 0;      height: 20px;    }    .num-group li {      float: left;      width: 20px;      height: 20px;      line-height: 20px;      font-size: 10px;      margin-right: 10px;      background-color: #089e8a;      color: #eee;      text-align: center;      border-radius: 10px;      cursor: pointer;      opacity: 0.8;    }    .num-group li:hover {      box-shadow: 0 0 18px #000;    }    .num-group li.current {      opacity: 1;      color: #089a8a;      background-color: #000;    }

There's not much to explain here, it's the style part.
Here is the JS section

// 首先，获取我们要改变的元素const oImage = document.getElementsByClassName("pic-group")[0];// 其次，获取改变世界的钥匙const oNumber = document.getElementsByClassName("num-group")[0];const numList = oNumber.getElementsByTagName("li");// 接下来，便是世界改变的逻辑for (let i = 0; i < numList.length; i++) {  // 关键：我们要把我们的 索引index 传进 onclick/onmouseover 里面  numList[i].onclick = () => {    // numList[i].className = "current";    clearNumState();    numList[i].className = "current";    const topValue = - i * 250;    oImage.style.top = topValue + "px";  }}// 每次新点击 num，先置空所有list的current的类，此后再添加当前索引const clearNumState = () => {  for (const item of numList) {    item.className = "";  }}

Through the above code we can already achieve the click the number button to switch the image.

Change the world's final or JS, rather than CSS, we use JS to add to the number of events.

4. User experience is King! --Buffering of the Carousel

Click can't switch picture series immediately

Times in progress, slash-and-burn JS---talk about rewriting before usingvar, after rewriting withletThe changes

Do not have to struggle with the problem of closures!!!!
Oh, grass!
I can't damn forget!

Xiu-Xiu-oldonclick

  for (var i = 0; i < oList.length; i++) {    oList[i].onclick = function () {      console.log(i);    }  }

The consequence of this writing is that no matter how it is written, the final i result will be oList.length .
Closures (anonymous functions) Use the result of externally acting on a variable, which is also because the anonymous function itself cannot pass arguments.
Therefore, you cannot maintain your scope.
When a function calls an external variable, it forms a closure, and the variables inside it are affected by other places. Force majeure! So the solution is to build a closure that only the anonymous function itself can access, and save the variables that are used only by itself.

• Ancient Solution I. Assign the current I to index using the past function functions

    for (var i = 0; i < oList.length; i++) {oList[i].index = i;oList[i].onclick = function () {  console.log(this.index);}  }

• Ancient solutions two. Isolate the external i-= anonymous function using anonymous functions: This is my field, magic-restricting!!!

    for (var i = 0; i < oList.length; i++) {(function (i) {  oList[i].onclick = () => {    console.log(i);  }})(i);  }

• However, I am a modern man, can take a bus why do I have to walk??? So!

    for (let i = 0; i < oList.length; i++) {oList[i].onclick = () => {  console.log(i);}  }

  The so-called four-and-two-ton! What the? You said there was no difference? var-Let
  In the final analysis, the problem of scope, let is a self-brought domain.

The final code is as follows

GitHub Address

Native JS Carousel-a minimalist implementation of various effects