怎么用js實(shí)現(xiàn)3D輪播圖效果

本篇內(nèi)容主要講解“怎么用js實(shí)現(xiàn)3D輪播圖效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用js實(shí)現(xiàn)3D輪播圖效果”吧!

具體內(nèi)容如下：

主要有平移和旋轉(zhuǎn)構(gòu)成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 timer
var current = 0 // 當(dāng)前播放圖片的索引
var flag = true //點(diǎn)擊防抖節(jié)流
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++) {
        // 當(dāng)前播放圖片索引值
        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)`
}
// 自動播放的函數(shù)
function autoPlay() {
    timer = setInterval(function () {
        if (current >= len - 1) {
            current = 0
        } else {
            current++
        }
        imgMove()
        autoLi()
    }, 3000)
}
// 點(diǎn)擊圖片進(jìn)行播放
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()
        }
    }
}
// 點(diǎn)擊左右按鈕
function btnClick() {
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            // 防止狂點(diǎn)擊
            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()
        }
    }
}
// 點(diǎn)
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實(shí)現(xiàn)3D輪播圖效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！