三维轮播

最新推荐文章于 2023-03-24 10:11:07 发布

Study 365 Always

最新推荐文章于 2023-03-24 10:11:07 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/L8676/article/details/100118416

版权


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background: black;
        }

        .banner {
            position: relative;
            width: 900px;
            height: 350px;
            margin: auto;
        }

        .imglist {
            width: 400px;
            height: 200px;
            position: absolute;
            box-shadow: 0 0 15px #fff;
            transition: all .1s linear;
        }

        .imglist > img {
            width: 100%;
            height: 100%;
        }

        .items {
            position: absolute;
            z-index: 10;
            left: 0;
            bottom: -40px;
            width: 100%;
            text-align: center;
        }

        .items > div {
            width: 17px;
            height: 17px;
            margin: 0 5px;
            border: 2px solid #fff;
            box-sizing: border-box;
            display: inline-block;
            transform: rotate(45deg);
        }

        .bgcolor {
            background: #17ff1e;
        }
    </style>
</head>
<body>
<div class="banner">
    <div class="imglist" style="left: 250px;top: 150px;z-index: 5">
        <img src="./img/1.jpg" alt=""/>
    </div>
    <div class="imglist" style="left:0px;top: 100px;z-index: 4">
        <img src="./img/2.jpg" alt=""/>
    </div>
    <div class="imglist" style="left:0px;top: 50px;z-index: 3">
        <img src="./img/3.jpg" alt=""/>
    </div>
    <div class="imglist" style="left:250px;top: 0px;z-index: 2">
        <img src="./img/4.jpg" alt=""/>
    </div>
    <div class="imglist" style="left:500px;top: 50px;z-index: 3">
        <img src="./img/5.jpg" alt=""/>
    </div>
    <div class="imglist" style="left:500px;top: 100px;z-index: 4">
        <img src="./img/6.jpg" alt=""/>
    </div>
    <div class="items">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script>
    /*
     * 1.网页加载完成  默认转动
     *
     * */

    var lists = document.getElementsByClassName("imglist");
    var item = document.getElementsByClassName("items")[0].children;
    var speed = 1500;
    var timer = null;
    var index = 0//记录当前正面的那张图的索引
    var count = 0;//用户操作的时候转的次数
    var isanimate = true;//记录动画的状态
    function animate() {
        timer = setInterval(function () {
            ShunAnimate();
            addColor();
        }, speed);
    }
    //顺时针动画
    function ShunAnimate() {
        var ele_0 = [lists[0].style.left, lists[0].style.top, lists[0].style.zIndex];
        for (var i = 0; i < lists.length; i++) {
            if (i < lists.length - 1) {
                lists[i].style.left = lists[i + 1].style.left;
                lists[i].style.top = lists[i + 1].style.top;
                lists[i].style.zIndex = lists[i + 1].style.zIndex;
            }
            else {
                lists[i].style.left = ele_0[0];
                lists[i].style.top = ele_0[1];
                lists[i].style.zIndex = ele_0[2];
            }
            if (lists[i].style.zIndex == 5) {
                index = i;
            }
        }
    }
    function addMouseEnter() {
        for (var i = 0; i < lists.length; i++) {
            lists[i].onmouseenter = function () {
                //停止计时器
                clearInterval(timer);
            }
            lists[i].onmouseleave = function () {
                animate();
            }
        }
    }
    function addColor() {
        //下面的点跟随变化的一个方法
        for (var i = 0; i < item.length; i++) {
            //当前变色
            if (i == index) {
                item[i].className = "bgcolor";
            }
            else {
                item[i].className = "";
            }
        }
    }
    function additemEvent() {
        for (var i = 0; i < item.length; i++) {
            item[i].index = i;
            item[i].onmouseenter = function () {
                clearInterval(timer);
                if (isanimate) {
                    isanimate = false;
                }
                else {
                    return;
                }
                //进入当前的变色
                count = this.index - index;
                //顺时针动画
                var num = 0;
                var c = 0;
                if (this.index > index) {
                    c = item.length - count;
                }
                else if (this.index < index) {
                    c = index - this.index;
                }
                loop();
                function loop() {
                    num++;
                    if (num > c) {
                        console.log("动画完成");
                        isanimate = true;
                        return;
                    }
                    ShunAnimate();//0.3ms
                    setTimeout(loop, 100);
                }

                index = this.index;
                addColor();

            }
            item[i].onmouseleave = function () {
                animate();
            }
        }
    }
    window.onload = function () {
        animate();
        addMouseEnter();
        addColor();
        additemEvent();
    }
</script>
</body>
</html>

Study 365 Always

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三维轮播

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { background: black; } ...
复制链接

扫一扫