图片的淡入淡出实现

Sk8？？？
于 2019-08-18 10:06:03 发布
阅读量303
点赞数
分类专栏：前端
本文链接：https://blog.csdn.net/MRslonly/article/details/99701721
版权
前端专栏收录该内容
27 篇文章 0 订阅
订阅专栏
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            width: 300px;
            height: 200px;
            position: relative;
            border: 1px solid red;
            margin: auto;
        }
        .imgglist{
            width: 300px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity .5s linear;
        }
        .imgglist img{
            width: 100%;
            height: 100%;
        }
        .dian{
            position: absolute;
            bottom: 0;
            left: 90px;
            z-index: 888;
        }
        .dian>div{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 3px solid white;
            float: left;
        }
        .bgcolor{
            background: red;
        }
        .jian{
            position: absolute;
            top: 100px;
            left: 0;
            width: 100%;
            z-index: 99;
        }
        .jian span{
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: #000;
            color: white;
            z-index: 99;
        }
        .jian span:first-of-type{
            float: left;
        }
        .jian span:last-of-type{
            float: right;
        }
    </style>
</head>
<body>
<div class="one">
<div class="par">
    <div class="imgglist"><a href="#"><img src="img/1.jpg" /></a></div>
    <div class="imgglist"><a href="#"><img src="img/2.jpg" /></a></div>
    <div class="imgglist"><a href="#"><img src="img/3.jpg" /></a></div>
    <div class="imgglist"><a href="#"><img src="img/4.jpg" /></a></div>
    <div class="imgglist"><a href="#"><img src="img/5.jpg" /></a></div>
    <div class="imgglist"><a href="#"><img src="img/6.jpg" /></a></div>
</div>
<div class="dian">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="jian">
    <span> < </span>
    <span> > </span>
</div></div>
<script>
    var imglist=document.getElementsByClassName("imgglist");
    var apr=document.getElementsByClassName("par")[0];
    var dian=document.getElementsByClassName("dian")[0].children;
    var jian=document.getElementsByClassName("jian")[0].children;
    var speed=1000;
    imglist[0].style.opacity=1;
    var time=null;
    var index=0;
    //设置图层
    function Zindex(){
        for(var i=0;i<imglist.length;i++){
            imglist[i].style.zIndex=imglist.length-i-1;
        }
    }
    //动画方式
    function donghua(res,count){
        for(var k=0;k<count;k++){
        for(var i=0;i<imglist.length;i++){
            var zindex=parseInt(imglist[i].style.zIndex);
            if(res=="right"){
            zindex +=1;
            if(zindex>=imglist.length){
                imglist[i].style.opacity=0;
                zindex=0;
            }
            if(zindex==imglist.length-1){
                imglist[i].style.opacity=1;
                index=i;
            }
            }
            else {
                zindex -= 1;
                if (zindex == -1) {
                    imglist[i].style.opacity = 1;
                    zindex = imglist.length - 1;
                    //动态修改index 的值
                    index = i;
                }
                else if (zindex == imglist.length - 2) {
                    imglist[i].style.opacity = 0;
                }
            }
                imglist[i].style.zIndex=zindex;
        } }
    }
    //点颜色变化事件
    function addcolor(){
            for(var i=0;i<dian.length;i++){
                if(i==index){
                    dian[i].className="bgcolor";
                }
                else{
                    dian[i].className="";
                }
            }
    }
    //进入图片事件
    function gopic(){
        apr.onmouseenter=function(){
            clearInterval(time);
        }
        apr.onmouseleave=function(){
            animate();
        }
    }
    //鼠标进入点点事件
    function diango(){
        for(var i=0;i<dian.length;i++){
            dian[i].index=i;
            dian[i].onmouseenter=function(){
                var count= this.index - index > 0 ? this.index - index : dian.length + (this.index - index);
                clearInterval(time);
                donghua("right",count);
                index=this.index;
                addcolor();
            }
            dian[i].onmouseleave=function() {
                animate();
            }
            }
    }
    //鼠标点击左右切换
    function jiango(){
        jian[0].onclick=function(){
            clearInterval(time);
            donghua("left",1);
            addcolor();
        }
        jian[1].onclick=function(){
            clearInterval(time);
            donghua("right",1);
            addcolor();
        }
    }
    function animate(){
        time=setInterval(function(){
            donghua("right",1);
            addcolor();
        },speed)
    }
    window.onload=function(){
        animate();
        Zindex();
        addcolor();
        gopic();
        diango();
        jiango();
    }
</script>
</body>
</html>