原生js实现图片淡入淡出效果——完整代码加解析

对于代码所有重要步骤都写在代码中了，希望对你有用哦！
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>淡入淡出</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        body{
            background-color: black;
        }
        .block{
            width:600px;
            height: 300px;
            position: relative;
            margin: 0 auto;
            border:1px solid silver;
        }
        ul>li{
            list-style: none;
            position: absolute;
            width:600px;
            height: 300px;
            opacity: 0;
            transition: all 1s linear;
        }
        ul>li>img{
            width:600px;
            height: 300px;
        }
        .banner{
            position: absolute;
            width:160px;
            height: 20px;
            left:220px;
            bottom: 2px;
            z-index: 10;
        }
        .banner>div{
            float: left;
            width:15px;
            height: 15px;
            margin: 3px 4px;
            border:1px solid white;
            border-radius: 50%;
            background-color: black;
            transition: all 0.5s linear;
        }
    </style>
</head>
<body>
<div class="block">
    <ul>
        <li class="lifo"><img src="./img/demo1.jpg"></li>
        <li class="lifo"><img src="./img/demo2.jpg"></li>
        <li class="lifo"><img src="./img/demo3.jpg"></li>
        <li class="lifo"><img src="./img/demo4.jpg"></li>
        <li class="lifo"><img src="./img/demo5.jpg"></li>
        <li class="lifo"><img src="./img/demo6.jpg"></li>
    </ul>
    <div class="banner">
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
    </div>
</div>
<script>
    var times;
    var dianzindex=0;
    var block=document.getElementsByClassName("block")[0];//一定要写[0]
    var lifo=document.getElementsByClassName("lifo");
    var dian=document.getElementsByClassName("dian");
    dian[0].style.backgroundColor="red";
    lifo[0].style.opacity=1;
    block.onmouseenter=function(){
        clearInterval (times);
    };
    block.onmouseleave=function(){
        times=setInterval (function(){
            img(1);
        },1500);
    }
    //6.给鼠标添加进入dian的事件 当点变红时，对应当前点的那张图片
    for(var i=0;i<dian.length;i++){
     dian[i].index=i;//关键 存储每一次点的索引值，如果不存，默认下面的this.index=dian.length-1;
     dian[i].onmouseenter=function(){
     dian[dianzindex].style.backgroundColor="black";
     this.style.backgroundColor="red";
     var count=this.index-dianzindex>0?this.index-dianzindex:lifo.length+(this.index-dianzindex)
     img(count);
     }
     }
    //1.给图片按照图层排序（5,4,3,2,1,0）
    for(var i=0;i<lifo.length;i++){
        lifo[i].style.zIndex=lifo.length-i-1;
    }

    times=setInterval (function(){
        img(1);
    },1500);
    function img(count){
        //2.写图层前后改变的顺序
        //5,4,3,2,1,0
        //0,5,4,3,2,1
        for(var k=0;k<count;k++){
            for(var i=0;i<lifo.length;i++){
            var zindex=lifo[i].style.zIndex;//存储当前索引的值
            zindex++;
                //3.写淡入淡出的效果
                //4.写点 当图片切换时，点变红
            if(zindex==5){
                lifo[i].style.opacity=1;
                dianzindex=i;
                dian[i].style.backgroundColor="red";
            }
            else{
                lifo[i].style.opacity=0;
                dian[i].style.backgroundColor="black";

            }
            if(zindex>lifo.length-1){
                zindex=0;
            }

            lifo[i].style.zIndex=zindex;//将改变后的zindex值赋给当前的图片
        }
        }

    }
</script>
</body>
</html>
有什么问题，欢迎随时提问哦！
原生js实现图片淡入淡出效果——完整代码加解析

猜你喜欢
