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

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

= 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!

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.