淡入淡出js动画

最新推荐文章于 2021-06-17 17:47:41 发布

Chanyelo_

最新推荐文章于 2021-06-17 17:47:41 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/qq_41985171/article/details/80424487

版权

最后附完整代码。

一。给一个容器block，block相对定位，里面的6张img绝对定位。

<div class="block">
    <img class="imglist" src="./image/demo1.jpg" alt=""/>
    <img class="imglist" src="./image/demo2.jpg" alt=""/>
    <img class="imglist" src="./image/demo3.jpg" alt=""/>
    <img class="imglist" src="./image/demo4.jpg" alt=""/>
    <img class="imglist" src="./image/demo5.jpg" alt=""/>
    <img class="imglist" src="./image/demo6.jpg" alt=""/>
</div>

样式如下：

.block{
            width: 600px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid red;
            position: relative;
        }
        .block img{
            width: 600px;
            height: 300px;
            position: absolute;
            opacity: 0;         //先将6张图片全设为全透明
            transition: all 0.5s linear;  //给img设置过渡
        }

二。通过类名获取6张img图片，然后调层。

因为我们的图片是绝对定位，最后一张的zindex最高，逐次递减。所以要将倒序的图片调成正序。

    var img=document.getElementsByClassName("imglist"); //获取img图片
    //调层
    for(var i= 0;i<img.length;i++){
        img[i].style.zIndex=img.length-i-1;
    }

三。设置一个定时器，里面调用start()函数，配合css中写的img过渡属性控制图片淡入淡出

    var times=setInterval(function(){
        start("right");  //页面打开定时器就起作用，默认顺序出图
    },1000)

    img[0].style.opacity=1;   //先将第一张图片不透明度设为1，此时可以看到第一张图片
    var start=function(res) {
        if(res=="right"){          //正序浏览图片
            for (var i = 0; i < img.length; i++) {
                img[i].style.zIndex++;                        //所有图片的zindex都加1
                if (img[i].style.zIndex == 6) {               //如果加1后zindex为6，即原来的zindex为5时
                    img[i].style.opacity = 0;                 //让这个图片变为透明
                    img[i].style.zIndex = 0;                  //zindex变为0
                }
                if (img[i].style.zIndex == 5) {               //如果加1后zindex为5，即原来的zindex为4时
                    img[i].style.opacity = 1;                 //让这个图片变为不透明
                }
            }
        }
        if(res=="left"){          //倒序浏览图片，此left参数主要用于后面要讲到的左箭头。点击左箭头，图片倒序切换一次。
            for (var i = 0; i < img.length; i++) {
                img[i].style.zIndex--;                      //所有图片zindex都减1
                if (img[i].style.zIndex == -1) {            //如果减下来为-1，即原来的zindex为0（最低层）时
                    img[i].style.opacity = 1;               //让这个图片变为不透明
                    img[i].style.zIndex=5;                  //层级调为最高层
                }
                if (img[i].style.zIndex == 4) {           //如果减下来为4，即原来的zindex为5（最高层）时
                    img[i].style.opacity = 0;             //将原来的最高层转为透明
                }
            }
        }
    }

四。给容器设置鼠标进入、鼠标离开事件。鼠标进入计时器停止，鼠标离开，计时器继续开始工作。

    var block=document.getElementsByClassName("block")[0];   //获取容器

    block.οnmοuseenter=function(){
        clearInterval(times);    //清除计时器
    }
    block.οnmοuseleave=function() {
        times = setInterval(function () {
            start("right");
        }, 1000);
    }

五。设置6个点。

<div class="block">
    <img class="imglist" src="./image/demo1.jpg" alt=""/>
    <img class="imglist" src="./image/demo2.jpg" alt=""/>
    <img class="imglist" src="./image/demo3.jpg" alt=""/>
    <img class="imglist" src="./image/demo4.jpg" alt=""/>
    <img class="imglist" src="./image/demo5.jpg" alt=""/>
    <img class="imglist" src="./image/demo6.jpg" alt=""/>
    <div class="dianblock">
        <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>

        .dianblock{
            width: 200px;
            height: 50px;
            position: absolute;
            bottom: 0;
            z-index: 6;
        }
        .dian{
            width: 15px;
            height: 15px;
            border: 3px solid white;
            border-radius: 50%;
            float: left;
            margin:15px 6px;
        }

六。点的颜色随图片变化而变化。播放第一张图片则第一个点的颜色为红色，以此类推。

var dian=document.getElementsByClassName("dian");   //获取点

var start=function(res) {
        if(res=="right"){
            for (var i = 0; i < img.length; i++) {
                img[i].style.zIndex++;
                if (img[i].style.zIndex == 6) {
                    img[i].style.opacity = 0;
                    img[i].style.zIndex = 0;
                }
                if (img[i].style.zIndex == 5) {
                    img[i].style.opacity = 1;
                }
            }
            dian[index].style.backgroundColor="";   //先删除原来点的红色
            index++;                               //index加1
            if(index>=6){                            //如果加到6
                index=0;                                //则从0开始
            }
            dian[index].style.backgroundColor="red";  //让加1后的index所对应的点的颜色为红色。
        }
        if(res=="left"){
            for (var i = 0; i < img.length; i++) {
                img[i].style.zIndex--;
                if (img[i].style.zIndex == -1) {
                    img[i].style.opacity = 1;
                    img[i].style.zIndex=5;
                }
                if (img[i].style.zIndex == 4) {
                    img[i].style.opacity = 0;
                }
            }
            dian[index].style.backgroundColor="";   //同理。
            index--;
            if(index<0){
                index=5;
            }
            dian[index].style.backgroundColor="red";
        }
    }

七。给每个点设置鼠标进入事件，鼠标进入，则显示这个点所对应的图片。

for(var k=0;k<dian.length;k++){
        dian[k].index=k;
        dian[k].οnmοuseenter=function(){
            for(var j=0;j<dian.length;j++){    //先清除所有点的颜色
                dian[j].style.backgroundColor="";
            }
            this.style.backgroundColor="red"; //让鼠标移入的这个点颜色为红
            var bindex=index;        //index为定义的全局变量，即原先点的索引
            var aindex=this.index-bindex>=0?this.index-bindex:this.index-bindex+6;//鼠标移入的索引位减去原先点的索引位，控制让start循环几次。如果相减为负，则加6.
            for(var m=0;m<aindex;m++){   
                start("right");
            }
        }
    }

八。左右箭头。

html代码：

    <span id="left"><</span> //与img同级
    <span id="right">></span>

css代码：

 #left{
            position: absolute;
            top: 130px;
            z-index: 6;
            font-size: 50px;
            font-weight: bold;
            color: red;
        }
        #right{
            position: absolute;
            right: 0;
            top: 130px;
            z-index: 6;
            font-size: 50px;
            font-weight: bold;
            color: red;
        }

js代码：

    var spanright=document.getElementById("right"); //获取左右箭头
    var spanleft=document.getElementById("left");
    spanright.οnclick=function(){       //给左右箭头设置点击事件
        start("right");
    }
    spanleft.οnclick=function(){
        start("left");
    }

附：全代码。。。。。。。。。。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            width: 600px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid red;
            position: relative;
        }
        .block img{
            width: 600px;
            height: 300px;
            position: absolute;
            opacity: 0;
            transition: all 0.5s linear;
        }
        .dianblock{
            width: 200px;
            height: 50px;
            position: absolute;
            bottom: 0;
            z-index: 6;
        }
        .dian{
            width: 15px;
            height: 15px;
            border: 3px solid white;
            border-radius: 50%;
            float: left;
            margin:15px 6px;
        }
        #left{
            position: absolute;
            top: 130px;
            z-index: 6;
            font-size: 50px;
            font-weight: bold;
            color: red;
        }
        #right{
            position: absolute;
            right: 0;
            top: 130px;
            z-index: 6;
            font-size: 50px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
<div class="block">
    <span id="left"><</span>
    <span id="right">></span>
    <img class="imglist" src="./image/demo1.jpg" alt=""/>
    <img class="imglist" src="./image/demo2.jpg" alt=""/>
    <img class="imglist" src="./image/demo3.jpg" alt=""/>
    <img class="imglist" src="./image/demo4.jpg" alt=""/>
    <img class="imglist" src="./image/demo5.jpg" alt=""/>
    <img class="imglist" src="./image/demo6.jpg" alt=""/>
    <div class="dianblock">
        <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>
</body>
<script>
    var img=document.getElementsByClassName("imglist");
    var block=document.getElementsByClassName("block")[0];
    var dian=document.getElementsByClassName("dian");
    var spanright=document.getElementById("right");
    var spanleft=document.getElementById("left");
    //调层
    for(var i= 0;i<img.length;i++){
        img[i].style.zIndex=img.length-i-1;
    }

    img[0].style.opacity=1;
    dian[0].style.backgroundColor="red";
    var index=0;
    var start=function(res) {
        if(res=="right"){
            for (var i = 0; i < img.length; i++) {
                img[i].style.zIndex++;
                if (img[i].style.zIndex == 6) {
                    img[i].style.opacity = 0;
                    img[i].style.zIndex = 0;
                }
                if (img[i].style.zIndex == 5) {
                    img[i].style.opacity = 1;
                }
            }
            dian[index].style.backgroundColor="";
            index++;
            if(index>=6){
                index=0;
            }
            dian[index].style.backgroundColor="red";
        }
        if(res=="left"){
            for (var i = 0; i < img.length; i++) {
                img[i].style.zIndex--;
                if (img[i].style.zIndex == -1) {
                    img[i].style.opacity = 1;
                    img[i].style.zIndex=5;
                }
                if (img[i].style.zIndex == 4) {
                    img[i].style.opacity = 0;
                }
            }
            dian[index].style.backgroundColor="";
            index--;
            if(index<0){
                index=5;
            }
            dian[index].style.backgroundColor="red";
        }
    }
    var times=setInterval(function(){
        start("right");
    },1000)
    block.οnmοuseenter=function(){
        clearInterval(times);
    }
    block.οnmοuseleave=function() {
        times = setInterval(function () {
            start("right");
        }, 1000);
    }
    spanright.οnclick=function(){
        start("right");
    }
    spanleft.οnclick=function(){
        start("left");
    }
    for(var k=0;k<dian.length;k++){
        dian[k].index=k;
        dian[k].οnmοuseenter=function(){
            for(var j=0;j<dian.length;j++){
                dian[j].style.backgroundColor="";
            }
            this.style.backgroundColor="red";
            var bindex=index;
            var aindex=this.index-bindex>=0?this.index-bindex:this.index-bindex+6;
            for(var m=0;m<aindex;m++){
                start("right");
            }
        }
    }
</script>
</html>

Chanyelo_

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫