Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how JS uses transform to achieve infinite scrolling of banner". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Function

Move to the right in an infinite loop by default

Click the number to switch to the corresponding picture

Click to switch left and right to switch pictures

Principle

First of all, let's talk about the principle.

In the layout, all the pictures are overlapping, that is, as long as the Y direction is aligned, the z-index level of the currently visible image is the highest.

Change a picture every 3 seconds and use setTimeout timing.

Use gIndex to record which image subscript is displayed in the current visual area, and calculate the subscript for the next image each time it is changed.

Through requestAnimationFrame to achieve a picture switch animation.

This method can also make it possible to always have only 2 img tags for the entire page without having to create all the img nodes. The key point is to change the src of the invisible img each time.

Realization of Animation

First define a timestap that records how much distance you move in each frame. Define the initial step=0 and record the number of steps moved.

The distance of each move moveWidth is timestamp*step, Picture 1 moves to the right to add moveWidth, and Picture 2 enters moveWidth from the left. Therefore, the transform of picture 1 is translate (moveWidth), while the transform of picture 2 is translate (moveWidth- picture width).

3. Step+1

4. If moveWidth > picture width, step 5, otherwise requestAnimationFrame request next execution, continue 2-4.

5. Pictures 1 and 2 both place the position at the beginning, and picture 2 has the highest z-index.

This completes a moving animation.

Html code

1 2 3 4

JS code

Var timeout = null; _ window.onload = function () {var oLeft = document.querySelector ('.left'); var oRight = document.querySelector ('.right'); var oButton = document.querySelector ('.left'); var oButtons = document.querySelectorAll ('.buttons div'); var oImgs = document.querySelectorAll (' .box img'); var imgWidth = oImgs [0] .width; var gIndex = 0; begainAnimate () / bind left and right click events oLeft.onclick = function () {clearTimeout (timeout); leftMove (); begainAnimate ();}; oRight.onclick = function () {clearTimeout (timeout); rightMove (); begainAnimate ();} / / bind numeric ordinal event oButton.onclick = function (event) {clearTimeout (timeout); var targetEl = event.target; var nextIndex = (+ targetEl.innerText)-1; console.log (nextIndex); rightMove (nextIndex); begainAnimate () } / / default initial animation to the right function begainAnimate () {clearTimeout (timeout); timeout = setTimeout (function () {rightMove (); begainAnimate ();}, 3000);} / / move animation function leftMove () {var nextIndex = (gIndex-1) to the left

< 0) ? oImgs.length - 1 : gIndex - 1; animateSteps(nextIndex, -50); } // 向右移动动画 function rightMove(nextIndex) { if (nextIndex == undefined) { nextIndex = (gIndex + 1 >

= oImgs.length)? 0: gIndex + 1;} animateSteps (nextIndex, 50);} / / one animation function animateSteps (nextIndex, timestamp) {var currentImg = oImgs [gIndex]; var nextImg = oImgs [nextIndex]; nextImg.style.zIndex = 10; var step = 0; requestAnimationFrame (goStep) / / move the animation to timestamp function goStep () {var moveWidth = timestamp * step++; if (Math.abs (moveWidth))

< imgWidth) { currentImg.style.transform = `translate(${moveWidth}px)`; nextImg.style.transform = `translate(${moveWidth >

0? (moveWidth-imgWidth): (imgWidth + moveWidth)} px) `; requestAnimationFrame (goStep);} else {currentImg.style.zIndex = 1; currentImg.style.transform = `translate (0px)`; nextImg.style.transform = `translate (0px) `; oButtons [gIndex] .setAttribute ('class','') OButtons [nextIndex] .setAttribute ('class',' active'); gIndex = nextIndex;}} _ window.onclose = function () {clearTimeout (timeout);}

Css layout style

/ * first set the box area of the picture and overlap the picture together * / header {width: 100%; position: relative; overflow: hidden;} .box {width: 100%; height: 300px;} .box img {width: 100%; height: 100%; position: absolute Transform: translateX (0); z-index: 1;} .box img:first-child {z-index: 10;} / * digit sequence button * / .sequence {position: absolute; right: 10%; bottom: 5%; display: flex; z-index: 100 Div {width: 30px; height: 30px; background-color: # aaa; border: 1px solid # aaa; text-align: center; margin: 10px; cursor: pointer; opacity: .7; border-radius: 15px; line-height: 30px } .switch div.active {background-color: white;} / * left / left, .right {position: absolute; width: 80px; height: 80px; background-color: # ccc; z-index: 100; top: 110px; border-radius: 40px Opacity: .5; cursor: pointer;} .left {left: 2%;} .right {right: 2%;} .left .arrow {width: 30px; height: 30px; border-left: solid 5px # 666; border-top: solid 5px # 666 Transform: translate (- 5px, 25px) rotate (- 45deg) translate (25px, 25px);} .right. Arrow {width: 30px; height: 30px; border-left: solid 5px # 666; border-top: solid 5px # 666; transform: translate (50px, 25px) rotate (135deg) translate (25px, 25px) } this is the end of the introduction of "how JS uses transform to achieve infinite scrolling of banner". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.