JavaScript（三十）立体轮播图demo

最新推荐文章于 2024-07-10 18:00:00 发布

We_jia

最新推荐文章于 2024-07-10 18:00:00 发布

阅读量441

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/We_jia/article/details/87892488

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

立体轮播图效果展示

HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block {
            position: relative;
            width: 900px;
            height: 370px;
            margin: 0 auto;
            overflow: hidden;
        }

        .imagePar > div {
            position: absolute;
            width: 400px;
            height: 200px;
            transition: all 0.5s linear;
        }

        .imagePar > div:nth-child(1) {
            top: 150px;
            left: 250px;
            z-index: 6;
        }

        .imagePar > div:nth-child(2) {
            top: 100px;
            left: 0;
            z-index: 5;
        }

        .imagePar > div:nth-child(3) {
            top: 50px;
            left: 0;
            z-index: 4;
        }

        .imagePar > div:nth-child(4) {
            top: 0;
            left: 250px;
            z-index: 3;
        }

        .imagePar > div:nth-child(5) {
            top: 50px;
            left: 500px;
            z-index: 4;
        }

        .imagePar > div:nth-child(6) {
            top: 100px;
            left: 500px;
            z-index: 5;
        }

        .imagePar > div > img {
            width: 400px;
            height: 200px;
        }
        .imagePar{
            position: relative;
            width: 900px;
            height: 350px;
        }
        .btn{
            width: 900px;
            height: 40px;
            position: absolute;
            top: 155px;
            z-index: 10;

        }
        .btn>span:nth-child(1){
            width: 30px;
            background-color: #909090;
            color: white;
            display: block;
            float: left;
            text-align: center;
            line-height: 40px;
            margin-left: -30px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.5s linear;
        }
        .btn>span:nth-child(2){
            color: white;
            width: 30px;
            background-color: #909090;
            display: block;
            float: right;
            text-align: center;
            line-height: 40px;
            margin-right: -30px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.5s linear;
        }
        .marleft{
            margin-left:0 !important;
            opacity: 1 !important;
        }
        .marright{
            margin-right:0 !important;
            opacity: 1 !important;
        }

        .dian{
            width: 108px;
            height: 14px;
            position: absolute;
            bottom: 0;
            left: 396px;
            z-index: 10;
        }
        .dian>div{
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: white;
            float: left;
            margin: 0 2px;
            border: 2px solid black;
            box-sizing: border-box;
        }


    </style>

</head>
<body>
<div class="block">
    <div class="imagePar">
        <div><img src="./img/111.jpg" alt=""/></div>
        <div><img src="./img/222.jpg" alt=""/></div>
        <div><img src="./img/333.jpg" alt=""/></div>
        <div><img src="./img/444.jpg" alt=""/></div>
        <div><img src="./img/555.jpg" alt=""/></div>
        <div><img src="./img/666.jpg" alt=""/></div>

    </div>
    <div class="btn">
        <span><</span>
        <span>></span>
    </div>
    <div class="dian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>


</div>

<script src="js/imageslider.js"></script>
</body>
</html>

JavaScript代码

/**
 * Created by Administrator on 2019/1/19.
 */

//获取imagePar     拿到子集
var imagePar = document.getElementsByClassName("imagePar")[0];
var imgchild = imagePar.children;
//获取点点
var dianChild = document.getElementsByClassName("dian")[0].children;
dianChild[0].style.backgroundColor = "#000000";  //默认颜色
showImage();
var time;

function showImage() {
    time = setInterval(function () {
        countTmage("left", 0);
    }, 1500);
}

function countTmage(dec, cindex) {
    //先存储第一张的样式�
    var firstpage = {
        left: window.getComputedStyle(imgchild[cindex]).left,
        top: window.getComputedStyle(imgchild[cindex]).top,
        zIndex: window.getComputedStyle(imgchild[cindex]).zIndex,
        backcolor: window.getComputedStyle(dianChild[cindex]).backgroundColor

    };
    if (dec == "left") {
        for (var i = 0; i < imgchild.length; i++) {
            if (i == imagePar.children.length - 1) {
                imgchild[i].style.left = firstpage.left;
                imgchild[i].style.top = firstpage.top;
                imgchild[i].style.zIndex = firstpage.zIndex;
                dianChild[i].style.backgroundColor = firstpage.backcolor;

            }
            else {
                imgchild[i].style.left = window.getComputedStyle(imgchild[i + 1]).left;
                imgchild[i].style.top = window.getComputedStyle(imgchild[i + 1]).top;
                imgchild[i].style.zIndex = window.getComputedStyle(imgchild[i + 1]).zIndex;
                dianChild[i].style.backgroundColor = window.getComputedStyle(dianChild[i + 1]).backgroundColor;
            }
        }
    }
    else {
        for (var i = imgchild.length - 1; i >= 0; i--) {
            if (i == 0) {
                imgchild[i].style.left = firstpage.left;
                imgchild[i].style.top = firstpage.top;
                imgchild[i].style.zIndex = firstpage.zIndex;
                dianChild[i].style.backgroundColor = firstpage.backcolor;
            }
            else {
                imgchild[i].style.left = window.getComputedStyle(imgchild[i - 1]).left;
                imgchild[i].style.top = window.getComputedStyle(imgchild[i - 1]).top;
                imgchild[i].style.zIndex = window.getComputedStyle(imgchild[i - 1]).zIndex;
                dianChild[i].style.backgroundColor = window.getComputedStyle(dianChild[i - 1]).backgroundColor;
            }
        }
    }
    firstpage = null;

}


document.onselectstart = function () {
    return false;   // 避免多次点击  被选中
};

var block = document.getElementsByClassName("block")[0];
var btn = document.getElementsByClassName("btn")[0];
var btnChild = btn.children;

block.onmouseenter = function () {   //鼠标移入
    clearInterval(time);
    for (var i = 0; i < btnChild.length; i++) {
        btnChild [i].className = i ? "marright" : "marleft";  //0表示alse
    }
    /*btnChild [0].className ="marleft";
     btnChild[1].className ="marright";*/
};
block.onmouseleave = function () {
    showImage();
    for (var i = 0; i < btnChild.length; i++) {
        btnChild [i].className = "";
    }
};


//左右俩边点击事件
btnChild[0].onclick = function (e) {
    if (e.detail == 1) {   //控制点击次数
        countTmage("left", 0);
    }
};
btnChild[1].onclick = function (e) {
    if (e.detail == 1) {
        countTmage("right", imgchild.length - 1);
    }
};


//点点的事件
for (var i = 0; i < dianChild.length; i++) {
    dianChild[i].index = i;
    dianChild[i].onclick = function () {
        for (var k = 0; k < dianChild.length; k++) {
            dianChild[k].style.transitionDuration = "0.1s";
        }

        //获取之前黑色点的索引  rgb(0, 0, 0) 有空格的问题
        var oldindex = 0;
        for (var k = 0; k < dianChild.length; k++) {
            if (dianChild[k].style.backgroundColor == 'rgb(0, 0, 0)') {
                oldindex = dianChild[k].index;
            }
        }
        var num = 0;  //用来判断总共需要转多少次
        /*如果当前索引大于之前索引  left-right  ("right",5)   小于之前索引   right-left  (left,0)*/
        if (this.index > oldindex) {
            num = this.index - oldindex;
            var timego = setInterval(function () {
                //  修改图片的过渡时间加快动画的进程  防止多张同时动
                num--;
                if (num < 0) {
                    clearInterval(timego);
                }
                else {
                    countTmage("right", 5)
                }
            }, 100);
        }
        else {
            num = Math.abs(this.index - oldindex);
            var timego = setInterval(function () {
                //  修改图片的过渡时间加快动画的进程  防止多张同时动
                num--;
                if (num < 0) {
                    clearInterval(timego);
                }
                else {
                    countTmage("left", 0)
                }

            }, 100);
        }
    }
}

//窗体失焦获焦
document.addEventListener("visibilitychange", function () {
    if (!document["hidden"]) {
        //激活
        showImage();
    } else {
        clearInterval(time);
    }
});

We_jia

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（三十）立体轮播图demo

立体轮播图效果展示HTML代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .block {
复制链接

扫一扫

专栏目录