三维轮播图的实现

最新推荐文章于 2024-08-26 09:57:43 发布

Sk8？？？

最新推荐文章于 2024-08-26 09:57:43 发布

阅读量430

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/MRslonly/article/details/99701703

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

HTML+CSS

<style>
    .one{
        width: 700px;
        height: 400px;
        position: relative;
        border: 1px solid red;
        margin: auto;

    }
        .imglist{
            width: 300px;
            height: 200px;
            position: absolute;
            transition: all .1s linear;
        }
        .imglist>img{
            width: 100%;
            height: 100%;
        }
        .dian{
            position: absolute;
            z-index: 100;
            left: 0;
            bottom: -40px;
            width: 100%;
            text-align: center;
        }
        .dian>div{
            height: 17px;
            margin: 0 5px;
            width: 17px;
            border: 2px solid green;
            box-sizing: border-box;
            display: inline-block;
            transform: rotate(45deg);
        }
        .bgcolor{
            background: red;
        }
    </style>
</head>
<body>
<div class="one">
    <div class="imglist" style="top:200px ;left: 200px; ;z-index: 5">
        <img src="img/1.jpg">
    </div>
    <div class="imglist" style="top:100px ;left: 25px;z-index: 4">
        <img src="img/2.jpg">
    </div>
    <div class="imglist" style="top: 50px;left: 25px;z-index: 3">
        <img src="img/3.jpg">
    </div>
    <div class="imglist" style="top:0 ;left: 200px;z-index: 2">
        <img src="img/4.jpg">
    </div>
    <div class="imglist" style="top:50px ;left: 375px;z-index:3 ">
        <img src="img/5.jpg">
    </div>
    <div class="imglist" style="top:100px;left: 375px;z-index: 4">
        <img src="img/6.jpg">
    </div>
    <div class="dian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</body>

js代码：


<script>
    var dian=document.getElementsByClassName("dian")[0].children;
    var imglist=document.getElementsByClassName("imglist");
    var img=document.getElementsByClassName("");
    var index=0;//记录当前正面的那张图的索引
    var time=null;
    var count = 0;//用户操作的时候转的次数
    var speed=1500;
    var isanimate = true;
    //图片的顺时针
    function shun(){
        var imgone=[imglist[0].style.left,imglist[0].style.top,imglist[0].style.zIndex];
            for(var i=0;i<imglist.length;i++){
                if(i<imglist.length-1){
                    imglist[i].style.left=imglist[i+1].style.left;
                    imglist[i].style.top=imglist[i+1].style.top;
                    imglist[i].style.zIndex=imglist[i+1].style.zIndex;
                }
                else{
                    imglist[i].style.left=imgone[0];
                    imglist[i].style.top=imgone[1];
                    imglist[i].style.zIndex=imgone[2];
                }
                if(imglist[i].style.zIndex==5){
                            index=i; }
            }
    }
    //点跟随变化
    function diancolor(){
        for(var i=0;i<imglist.length;i++){
            if(i==index){
                dian[i].className="bgcolor";
            }else{
                dian[i].className="";
            }
        }
    }
    //点的进入事件
    function diango(){
        for(var i=0;i<imglist.length;i++){
            dian[i].children.onmouseenter=function(){
                clearInterval(time);
            }
            dian[i].children.onmouseleave=function(){
                ji();
            }
        }
    }
    //计时器
    function ji(){
        time=setInterval(function(){
            shun();
            diancolor();
            mouse();
        },speed)
    }
    //鼠标进入图片事件
    function gopic(){
        for (var i = 0; i < imglist.length; i++) {
            imglist[i].onmouseenter = function () {
                //停止计时器
                clearInterval(time);
            }
            imglist[i].onmouseleave = function () {
                ji();
            }
        }
    }
    //鼠标进入点事件
    function mouse(){
            for(var i=0;i<dian.length;i++){
                dian[i].index=i;
                dian[i].onmouseenter=function(){
                    clearInterval(time);
                    if(isanimate){
                        isanimate=false;
                    }
                    else{
                        return;
                    }
                    count=this.index-index;
                    var num=0;
                    var c=0;
                    if(this.index>index){
                        c=dian.length-count;
                    }else if(this.index<index){
                        c=index-this.index;
                    }
                    loop();
                    function loop(){
                        num++;
                        if(num>c){
                            isanimate=true;
                            return;
                        }
                        shun();
                        setTimeout(loop,100);
                    }
                    index=this.index;
                    diancolor();
                }
                dian[i].onmouseleave=function(){
                    ji();
                }
            }
    }
    window.onload=function(){
        shun();
        ji();
        mouse();
        diancolor();
        gopic();
    }
</script>