JS实现3D轮播图样式（补充功能）

最新推荐文章于 2023-11-28 23:45:42 发布

依旧空白

最新推荐文章于 2023-11-28 23:45:42 发布

阅读量301

点赞数 2

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/fan_shao_/article/details/120372180

版权

看到个3D轮播图，但功能较单一，就加了点功能，大家相互学习学习。

主要样式来自代号[K] 的“JS实现3D轮播图样式” 这篇文章

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D轮播图</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="box">
        <div class="wrapper">
            <img src="./img/1.jpg" class="image">
            <img src="./img/2.jpg" class="image">
            <img src="./img/3.jpg" class="image">
            <img src="./img/4.jpg" class="image">
            <img src="./img/5.jpg" class="image">
        </div>
        <div class="btn" id="btn">
            <span class="left"><</span>
            <span class="right">></span>
        </div>
        <ul class="point"></ul>
    </div>
    <script src="index.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}
.box {
    position: relative;
    /* width: 1500px;
    height: 400px; */
    width: 100%;
    height: 100%;
    top: 200px;
    margin: auto;
}
.wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #eee;
    perspective: 800px;
    transform-style: preserve-3d;
}
.image{
    float: left;
    width: 300px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 8px;
    transition: transform 1s ease-in-out;
}

/* 左右按钮 */
.btn{
	position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -25px);
    width: 1250px;
    z-index: 999
}
.btn .left,
.btn .right {
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    color: white;
    line-height: 50px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.4);
}
.btn .left {
    left: 0;
}
.btn .right {
    right: 0;
}
.btn span:hover {
    background-color: rgba(0,0,0,0.7);
}

/* 小圆圈 */
.point{
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%, 200px);
	height: 14px;
    z-index: 999

}
.point>li {
    list-style: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: white;
	float: left;
	margin: 0 2px;
	border: 2px solid rgb(160, 162, 167);
	box-sizing: border-box;
}
.point .current {
    border: 2px solid rgb(70, 71, 71);
    background-color: rgb(119, 116, 116);
}

var imgs = document.getElementsByTagName("img");
var btns = document.getElementsByTagName("span");
var ul = document.getElementsByTagName("ul");
var lis = document.getElementsByTagName("li");
var len = imgs.length;
var current = 0;
let flag = true;
var timer;

function wrapper() {
    frount();
    bind();
    getLi();
    btnClick();
    showLis();
    autoplay();
};
wrapper();

// 图片移动
function frount() {
    var mlen = Math.floor(len / 2);
    var limg, rimg;
    for (var i = 0; i < mlen; i++) {
        limg = len + current - i - 1;
        rimg = current + i + 1;
        if (limg >= len) {
            limg -= len;
        }
        if (rimg >= len) {
            rimg -= 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 bind() {
    for (var i = 0; i < len; i++) {
        (function (i) {
            imgs[i].onclick = function () {
                current = i;
                frount();
                autoLi();
            }
        })(i);
        imgs[i].onmouseenter = function () {
            clearInterval(timer);
        }
        imgs[i].onmouseout = function () {
            autoplay();
        }
    }
};

// 自动更换图片
function autoplay() {
    timer = setInterval(function () {
        if (current >= len - 1) {
            current = 0;
        } else {
            current++;
        }
        frount();
        autoLi();
    }, 2000)
}

// 点击左右按钮
function btnClick() {
    for (var i = 0; i < btns.length; i++) {
        (function (i) {
            btns[i].onclick = function () {
                if (!flag) { return; }
                flag = false;
                // 左按钮
                if(i==0){
                    if (current <= 0) {
                        current = len - 1;
                    } else {
                        current--;
                    }
                }
                // 右按钮
                if(i==1){
                    if (current >= len - 1) {
                        current = 0;
                    } else {
                        current++;
                    }
                    
                }
                setTimeout(() => {
                    flag = true;
                }, 800);
                frount();
                autoLi();
            }
        })(i);
        btns[i].onmouseenter = function () {
            clearInterval(timer);
        }
        btns[i].onmouseout = function () {
            autoplay();
        }
    }
};

// 点击小圆圈
function getLi (){
    for(var i = 0; i < len; i++){
        (function (i) {
            ul[0].innerHTML +="<li></li>"
            }
        )(i);
    }
    lis[0].classList.add("current")
}

function showLis() {
    for (var i = 0; i < len; i++) {
        (function (i) {
            lis[i].onclick = function () {
                // 排他思想
                for (var k = 0; k < len; k++) {
                    lis[k].classList.remove("current")
                }
                this.classList.add("current")
                current = i;
                frount();
            }
        })(i);
        lis[i].onmouseenter = function () {
            clearInterval(timer);
        }
        lis[i].onmouseout = function () {
            autoplay();
        }
    }
}
function autoLi() {
    for (var i = 0; i < len; i++) {
        if (i == current) {
            lis[i].classList.add("current")
        } else {
            lis[i].className = '';
        }
    }
}

依旧空白

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS实现3D轮播图样式（补充功能）

看到个3D轮播图，但功能较单一，就加了点功能，大家相互学习学习。主要样式来自代号[K] 的“JS实现3D轮播图样式” 这篇文章HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v...
复制链接

扫一扫