这篇文章将为大家详细讲解有关“JavaScript中怎样做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 timer
var 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")
        }
    }
}

到此这篇关于“JavaScript中怎样做3D轮播图，思路及方法是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• element-plus怎么实现按需导入，具体操作是什么

  本文主要介绍了element-plus中如何实现按需导入与全局导入，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Bootstrap网格系统如何工作，单元格宽度怎样设置

  栅格就是网格，本文详细的介绍了Bootstrap网页布局网格的原理和实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• js怎样实现一张长图滚动效果？

  这篇文章给大家分享的是有关js实现长图滚动效果的内容，小编觉得挺实用的，在很多常见都能应用到，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

• JS表达式怎样写，JS操作符有哪些

  JS表达式怎样写，JS操作符有哪些？一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

• 在JS中求数组的质数方法是什么

  用for循环语句或filter()方法循环历数组，在每个循环中将一个数组元素分别去除2到sqrt(元素本身)。如果可以去除，则表明该组元素并非质数，而是质数。