怎么用js实现3D轮播图效果

本篇内容主要讲解“怎么用js实现3D轮播图效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用js实现3D轮播图效果”吧!

具体内容如下：

主要有平移和旋转构成3d效果的轮播图，小白一只，不足之处还请大家多多指教，代码如下

CSS代码：

 *{            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%,-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(0,0,0,0.8);        }        .points{            position: absolute;            left: 50%;            bottom: 10px;            transform: translate(-50%,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代码：

<div class="box">        <div class="warpper">            <img src="./励志3.jpg" alt="">            <img src="./励志2.jpg" alt="">            <img src="./2f1d.jpg" alt="">            <img src="./aimg.jpg" alt="">            <img src="./peg.jpg" alt="">        </div>        <div class="btn" id="btn">            <span class="left"> < </span>            <span class="right"> > </span>        </div>        <ul class="points">        </ul>    </div><script src="swarp.js"></script>

JS代码：

var imgs = document.querySelectorAll("img")var btns = document.querySelectorAll("span")var ul = document.querySelector(".points")var lis = document.getElementsByTagName("li")var timervar current = 0 // 当前播放图片的索引var flag = true //点击防抖节流var len = imgs.length //图片长度function loadFirst() {    imgMove()    bind()    btnClick()    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(${150 * (i + 1)}px) translateZ(${200 - i * 100}px) rotateY(-30deg)`        imgs[rimg].style.transform = `translateX(${-150 * (i + 1)}px) translateZ(${200 - i * 100}px) rotateY(30deg)`    }    imgs[current].style.transform = `translateZ(300px)`}// 自动播放的函数function autoPlay() {    timer = setInterval(function () {        if (current >= len - 1) {            current = 0        } else {            current++        }        imgMove()        autoLi()    }, 3000)}// 点击图片进行播放function bind() {    for (let i = 0; i < imgs.length; i++) {        imgs[i].onclick = function () {            current = i            imgMove()            autoLi()        }        imgs[i].onmouseover = function () {            clearInterval(timer)        }        imgs[i].onmouseout = function () {            autoPlay()        }    }}// 点击左右按钮function btnClick() {    for (let i = 0; i < btns.length; i++) {        btns[i].onclick = function () {            // 防止狂点击            if (!flag) {                return            }            flag = false            if (i == 0) {                // 上一张                if (current <= 0) {                    current = len - 1                } else {                    current--                }            } else {                //下一张                if (current >= len - 1) {                    current = 0                } else {                    current++                }            }            setTimeout(function () {                flag = true            }, 1000)             imgMove()            autoLi()         }        btns[i].onmouseenter = function () {            clearInterval(timer)        }        btns[i].onmouseout = function () {            autoPlay()        }    }}// 点function getDot() {    for (var i = 0; i < len; i++) {        ul.innerHTML += `<li></li>`    }    lis[0].classList.add("current")}function showDot() {    for (let i = 0; i < len; i++) {        lis[i].onclick = function () {            for (var j = 0; j < len; j++) {                lis[j].classList.remove("current")            }            this.classList.add("current")            current = i            imgMove()        }    }}function autoLi() {    for (var i = 0; i < len; i++) {        if (i == current) {            lis[i].classList.add("current")        } else {            lis[i].classList.remove("current")        }    }}

到此，相信大家对“怎么用js实现3D轮播图效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！