preface

Hand tear round broadcast chart may be a lot of front-end beginners nightmare, many companies in order to inspect the examinee’s basic knowledge of the situation, usually a hand tear round broadcast chart. While many people look down on this interview question, many people can’t write the right code, even developers who have been around for a while.

In fact, it is not difficult to tear the wheel, as long as you understand the principle, it is also very simple to achieve, of course, the key is to have a solid JS foundation.

Next, we will take you to achieve a simple round cast graph.

1. Principle introduction

In fact, the principle of rote graph is not too complicated, which can be summarized as two points:

  • Application of positioning
  • Use of timer

The above two points are mainly two important points in the implementation method of the wheel cast map, through the following two pictures we can more easily understand the principle of the wheel cast map:

1, 2, 3, 4 in the picture above… The boxes can be seen as pictures, arranged horizontally. The outermost layer also has a parent box, which is exactly the width of an image. The first image is not set to hide the excess, and the second image hides the excess.

Let’s move our image around, let it appear in the viewable area, add some animation, and it becomes the rotation image we want.

2. The effect achieved

Knowing the general principle, let’s work out the effect we need to achieve:

  • Automatic picture rotation
  • The rotation has animation effect
  • Click the left and right buttons to switch
  • Click the number button to switch to the corresponding picture
  • The number button has the effect of being selected
  • Mouse over stops auto – play

3. Specific implementation method

3.1 HTML layout

As you can see from the image above, the HTML layout is very simple, divided into three main parts: left and right toggle buttons, image list, and bottom number toggle buttons.

The code is as follows:

<div class="container"> <! - image list - > < ul class = "ul - img" > < li class = "li - img" > 1 < / li > < li class = "li - img" > 2 < / li > < li class = "li - img" > 3 < / li > < li class="li-img">4</li> <li class="li-img">5</li> </ul> <! <div class="prev"> <span>&lt; </span> </div> <div class="next"> <span>&gt; </span> </div> <! -- digital switch button - > < div class = "num - box" > < ul class = "num - ul" > < li data - index = "0" > 1 < / li > < li data - index = "1" > 2 < / li > < li data-index="2">3</li> <li data-index="3">4</li> <li data-index="4">5</li> </ul> </div> </div>Copy the code

What needs to be noted here is that we have added a custom attribute to the li label of the numeric switch button, because we will use it later in JS to determine which picture corresponds to and set the selected effect conveniently.

3.2 CSS style

We need to line up the list of images, and make the outermost box set beyond hiding, and the other two parts can be positioned in their respective positions, as follows:

.container { position: relative; width: 600px; height: 400px; margin: 0 auto; background-color: gray; overflow: hidden; } .ul-img { position: absolute; display: flex; width: 4200px; height: 400px; left: 0; padding: 0; margin: 0; } .li-img { list-style: none; width: 600px; height: 400px; display: flex; align-items: center; justify-content: center; background-color: aquamarine; font-size: 30px; font-weight: 800; border: 1px solid #ccc; } /* next */. Prev,. Next {position: absolute; height: 400px; width: 80px; display: flex; justify-content: center; align-items: center; top: 0; } .prev { left: 0; } .next { right: 0; } .prev span, .next span { display: block; color: #fff; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; Background: rgba(0, 0, 0, 0.5); border-radius: 50%; cursor: pointer; } /* Num-box */. Num -box {position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 0); z-index: 2; } .num-ul { list-style: none; margin: 0; padding: 0; display: flex; } .num-ul li { height: 20px; width: 20px; border-radius: 50%; Background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; font-size: 9px; color: #fff; margin: 0 4px; cursor: pointer; user-select: none; }Copy the code

At this point, the basic style is displayed, but it can’t be rotated yet. The first image is always displayed:

At this point our basic layout is achieved, but there is still some distance from our requirements, focusing on the JS part.

3.3 JS code

JS logic code is the core part of the implementation of our entire requirements, first the overall code, we will explain:

/ / to get element node var containerDom = document. The getElementsByClassName (" container ") [0]; / var/container ulDom = document. GetElementsByClassName (ul - "img") [0]. / / picture box var prevDom = document. The getElementsByClassName (" prev ") [0]. FirstElementChild; / / var nextDom = a button on the document. The getElementsByClassName (" next ") [0]. FirstElementChild; / / next buttons var numUlDom = document. GetElementsByClassName (num - "ul") [0]. Var numList = document.getelementsByClassName ("num-ul")[0].getelementsByTagName ("li"); Var currentIndex = 0; Var timer = null; NumList [currentIndex].style. BackgroundColor = "# CCC "; Prevdom. addEventListener("click", prevFun); // Nextdom.addeventListener ("click", nextFun); / / mouse into containers, stop automatically play containerDom. AddEventListener (" mouseenter ", stopAutoPlay); / / mouse out of containers, open automatically play containerDom. AddEventListener (" mouseleave ", the autoPlay); . / / digital button click event numUlDom addEventListener (" click ", numClick); // Enable autoPlay(); Function prevFun() {uldom.style. Transition = "0.5s"; numList[currentIndex].style.backgroundColor = ""; If (currentIndex === 0) {uldom.style. Transition = "0s"; // Clear animation currentIndex = 4 for seamless scrolling; } else { --currentIndex; } ulDom.style.left = `-${currentIndex * 600}px`; numList[currentIndex].style.backgroundColor = "#ccc"; } function nextFun() {uldom.style.transition = "0.5s"; numList[currentIndex].style.backgroundColor = ""; If (currentIndex === 4) {uldom.style. Transition = "0s"; // To achieve seamless scrolling, clear animation currentIndex = 0; } else {++currentIndex; } ulDom.style.left = `-${currentIndex * 600}px`; numList[currentIndex].style.backgroundColor = "#ccc"; Function numClick(e) {uldom.style.transition = "0.5s"; function numClick(e) {uldom.style.transition = "0.5s"; let index = e.target.dataset.index; if (index == undefined) { return; } numList[currentIndex].style.backgroundColor = ""; CurrentIndex = Number(index); numList[currentIndex].style.backgroundColor = "#ccc"; ulDom.style.left = `-${currentIndex * 600}px`; } function autoPlay() {timer = setInterval(nextFun, 1000); } function stopAutoPlay() {// Clear the timer clearInterval(timer); }Copy the code

Js there are several main methods, here to explain one or two you will understand, for example, we need to click the button to switch to a picture or the next, the main implementation method is as follows:

Function nextFun() {uldom.style. Transition = "0.3s "; numList[currentIndex].style.backgroundColor = ""; If (currentIndex === 4) {uldom.style. Transition = "0s"; // To achieve seamless scrolling, clear animation currentIndex = 0; } else {++currentIndex; } ulDom.style.left = `-${currentIndex * 600}px`; numList[currentIndex].style.backgroundColor = "#ccc"; // Set button selection style}Copy the code

When we click toggle button, first clear the selected style of the previous number button, and then determine whether it is the last image or the first image. We’ve declared a global variable currentIndex to store the number of images we’re currently showing.

CurrentIndex is then used to dynamically calculate the left distance of the image to be displayed.

The principle of auto play and click the number button to switch the picture is similar to this method, and both need to calculate the left of the picture to be displayed.

3.4 Core methods

In the js section we have about five main methods:

  • PrevFun () : Click to switch to the previous one
  • NextFun () : Click to switch to the next one
  • NumClick (e) : Click a numeric button
  • AutoPlay () : plays round in a loop
  • StopAutoPlay () : Disables auto play

conclusion

It is not difficult to implement the wheel – cast graph, the difficulty is patience. A rotation map is simply an image in a row that appears in the right area at the right time.

Of course, there are a lot of ways and methods to achieve the wheel cast graph, such as using pure CSS can also achieve the wheel cast graph, mainly depends on personal needs.