JavaScript（二十九）淡入淡出轮播图demo

最新推荐文章于 2021-06-21 13:26:22 发布

We_jia

最新推荐文章于 2021-06-21 13:26:22 发布

阅读量172

点赞数

分类专栏： JavaScript

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

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

简单版轮播图效果展示

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .b {
            position: relative;
            width: 600px;
            height: 400px;
            border: 1px solid silver;
            margin: 100px auto;
        }

        .a {
            position: relative;
            width: 600px;
            height: 400px;

        }

        .a > img {
            position: absolute;
            width: 600px;
            height: 400px;
            transition: opacity 1s linear;
        }

        .imgopshow {
            opacity: 1;
        }

        .imgop {
            opacity: 0;
        }

        .dian {
            position: absolute;
            z-index: 99999;
            bottom: 20px;
            left: 40px;
            height: 13px;
        }

        .dian > div {
            width: 13px;
            height: 13px;
            border: 1px solid white;
            background-color: transparent;
            box-sizing: border-box;
            float: left;
            margin: 0 3px;
            border-radius: 50%;
            transition: background-color 1s linear;
        }

        .dbg {
            background-color: red !important;
        }

        .btn {
            width: 600px;
            height: 50px;
            position: absolute;
            z-index: 999;
            top: 175px;
        }

        .btnleft {
            cursor: pointer;
            display: block;
            width: 30px;
            height: 50px;
            background-color: rgba(181, 181, 181, 0.67);
            color: #e0e0e0;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            float: left;
        }

        .btnright {
            cursor: pointer;
            display: block;
            width: 30px;
            height: 50px;
            background-color: rgba(181, 181, 181, 0.67);
            color: #e0e0e0;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            float: right;
        }

    </style>

</head>
<body>
<div class="b">
    <div class="btn">
        <span class="btnleft"><</span>
        <span class="btnright">></span>
    </div>

    <div class="a">
        <img class="imgopshow" src="./img/111.jpg" alt=""/>
        <img class="imgop" src="./img/222.jpg" alt=""/>
        <img class="imgop" src="./img/333.jpg" alt=""/>
        <img class="imgop" src="./img/444.jpg" alt=""/>
        <img class="imgop" src="./img/555.jpg" alt=""/>
        <img class="imgop" src="./img/666.jpg" alt=""/>
        <img class="imgop" src="./img/777.jpg" alt=""/>
        <img class="imgop" src="./img/888.jpg" alt=""/>
    </div>
    <div class="dian">
        <div class="dbg"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<script>
    var a = document.getElementsByClassName("a")[0];
    var b = document.getElementsByClassName("b")[0];
    var dian = document.getElementsByClassName("dian")[0];
    var nowDian = dian.children[0];

    //获取按钮
    var btnleft=document.getElementsByClassName ("btnleft")[0];
    var btnright=document.getElementsByClassName ("btnright")[0];

    var time;   //接收计时器

    for (var i = 0; i < a.children.length; i++) {
        a.children[i].style.zIndex = a.children.length - 1 - i;//  zIndex越大在越上边
    }
    showPhoto();
    function showPhoto() {
        time = setInterval(function () {
            countAnimate(1);
        }, 2000);
    }
    function countAnimate(num){
       for(var k=0;k<num;k++){
           //最上边   opacity=0,第七个 显示 opacity=1
           for (var i = 0; i < a.children.length; i++) {
               var index = a.children[i].style.zIndex;
               index++;
               if (index == a.children.length) {
                   index = 0;
                   a.children[i].className = "imgop";
                   dian.children[i].className = "";

               }
               else if (index == a.children.length - 1) {
                   /*   nowDian.className ="";*/
                   a.children[i].className = "imgopshow";
                   dian.children[i].className = "dbg";
                   nowDian = dian.children[i];
               }
               a.children[i].style.zIndex = index;
           }

       }
    }


    //点每一个小点
    for (var k = 0; k< dian.children.length; k++) {
        dian.children[k].index=k;
        dian.children[k].onmouseenter = function () {
            nowDian.className = "";
            this.className = "dbg";
            var num =0;
            if(this.index-nowDian.index>0){
                num=this.index-nowDian.index;
            }
            else{
                num=dian.children.length-Math.abs (this.index-nowDian.index);
            }

            countAnimate(num);
            nowDian =this;


        }
    }


    b.onmouseenter = function () {
        clearInterval(time);  //暂停
    };
    b.onmouseleave = function () {
        showPhoto();
    };

    btnright.onclick=function(){
        countAnimate(1);
    };
    btnleft.onclick=function(){
        countAnimate(7);
    }
</script>
</body>
</html>