How to realize the effect of 3D broadcast Picture with js

This article mainly explains "how to use js to achieve 3D broadcast effect". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to use js to achieve 3D round picture effect"!

The details are as follows:

There are mainly translation and rotation to form a 3D effect of the rotation map, a rookie, shortcomings also ask you to comment, the code is as follows

Css Code:

* {padding: 0; margin: 0;} .box {position: relative; width: 100%; height: 100%; top: 200px; margin: auto;} .warpper {position: absolute; width: 100%; height: 100% Perspective: 800px; transform-style:preserve-3d;} .box .warpper img {width: 300px; height: 200px; float: left; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto Border-radius: 8px; transition: all 1s ease-in-out;} .btn {position: relative; top: 50%; left: 50%; width: 1200px; transform: translate (- 50% btn 20px);} .btn .left, .btn .right {height: 50px Width: 50px; font-size: 30px; text-align: center; line-height: 50px; background-color: black; color: white; border-radius: 15%; position: absolute;} .btn .left {left: 0 } .btn .right {right: 0;} .btn span:hover {background-color: rgba;} .points {position: absolute; left: 50%; bottom: 10px; transform: translate (- 50% focus 200px); height: 14px } .points li {display: inline-block; list-style: none; width: 14px; height: 14px; border: 1px solid # 000; border-radius: 50%; background-color: white; margin: 0 5px;} .points .current {background-color: red }

HTML Code:

< >

JS Code:

Var imgs = document.querySelectorAll ("img") var btns = document.querySelectorAll ("span") var ul = document.querySelector (".points") var lis = document.getElementsByTagName ("li") var timervar current = 0 / / Index of the currently played picture var flag = true / / Click anti-jitter throttling var len = imgs.length / / Image length function loadFirst () {imgMove () bind () getDot () showDot () autoPlay ()} loadFirst () function imgMove () {var mlen = Math.floor (len / 2) for (var I = 0 I

< mlen; i++) { // 当前播放图片索引值 var rimg = current + 1 + i var limg = len + current - 1 - i if (rimg >

= len) {rimg-= len} if (limg > = len) {limg-= len} imgs [limg] .style.transform = `translateX (${150mg * (I + 1)} px) translateZ (${200i100} px) rotateY (- 30deg) `imgs [rimg] .style.transform = `translateX (${150 * (I + 1)} px) ) translateZ (${200-I * 100} px) rotateY (30deg) `} imgs [current] .style.transform = `current (300px)`} / / automatically played function function autoPlay () {timer = setInterval (function () {if (current > = len-1) {current = 0} else {current++} imgMove () autoLi ()} 3000)} / / Click the picture to play function bind () {for (let I = 0) I < imgs.length ) {imgs.onclick = function () {current = I imgMove () autoLi ()} imgs.onmouseover = function () {clearInterval (timer)} imgs.onmouseout = function () {autoPlay ()}} Click the left and right button function btnClick () {for (let I = 0 I < btns.length If +) {btns [I] .onclick = function () {/ / prevent if (! flag) {return} flag = false if (I = = 0) {/ / previous if (current = len-1) { Current = 0} else {current++}} setTimeout (function () {flag = true}) 1000) imgMove () autoLi ()} btns [I] .onmouseenter = function () {clearInterval (timer)} btns.onmouseout = function () {autoPlay ()}} / / Point function getDot () {for (var I = 0) I < len; iTunes +) {ul [XSS _ clean] + = ``} lis [0] .classList.add ("current")} function showDot () {for (len; I = 0; I < len; iTunes +) {lis.onclick = function () {for (var j = 0; j < len) Current +) {lis.classList.remove ("current")} this.classList.add ("current") current = I imgMove ()}} function autoLi () {for (var I = 0; I < len) Current +) {if (I = = current) {lis.classList.add ("current")} else {lis.classList.remove ("classList.remove (" classList.remove ")} so far, I believe you have a deeper understanding of" how to use js to achieve 3D round effect ". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!