原生javaScript实现图片透明渐变轮播（代码）

效果图：

 效果描述：改变opacity的值，结合z-index;实现图片透明度渐变；

• 点击Li,显示对应图片；
• 点击左右按钮，分别显示上一张、下一张图片；
• 鼠标移入，渐变停止；鼠标移出，渐变开始

代码如下： 

<style>
        *{
            margin:0px;
            padding: 0px;
            text-decoration: none;
        }
        .box{
            width: 600px;
            height: 400px;
            margin:20px auto;
            border:1px solid red;
            position: relative;
        }
        .divImg img{
            width: 600px;
            height: 400px;
            position: absolute;
            top:0px;
            left: 0px;
            opacity: 0.2;
        }
        .arrow{
            font-size: 30px;
            font-weight: bold;
            position: absolute;
            top:48%;
            display: none;
            z-index: 10;
        }
        .box:hover .arrow{
            display: inline;
        }
        .left{
            left:20px;
        }
        .right{
            right: 20px;
        }
        ul{
            list-style: none;
            position: absolute;
            bottom:20px;
            left:50px;
            z-index: 10;
        }
        ul li{
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            font-weight: bold;
            background-color: #666;
            border-radius: 50%;
            color: #fff;
            float: left;
            margin-left: 5px;
        }
        .bg{
            background-color: pink;
        }
    </style>

<div class="box">
        <div class="divImg">
            <img src="./img/1.jpg" style="z-index:2">
            <img src="./img/2.jpg">
            <img src="./img/3.jpg">
            <img src="./img/4.jpg">
            <img src="./img/5.jpg">
        </div>
        <a href="javascript:;" class="arrow left">&lt;</a>
        <a href="javascript:;" class="arrow right">&gt;</a>
        <ul>
            <li class="bg">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

//获取操作对象
       var box=document.querySelector('.box')
       var leftBtn=document.querySelector('.left')
       var rightBtn=document.querySelector(".right")
       var imgs=document.querySelectorAll('img')
       var lis=document.querySelectorAll('li')
       var dsq1 //图片切换的定时器名称
       var index=0 //图片和按钮同时的下标
       //先显示第一张图片
       move(imgs[index],{opacity:100})
       //让图片进行切换
       function moveMent(){
           hide1()
           index++
           if(index>4){
               index=0
           }
           show1()
       }
       dsq1=setInterval(moveMent,3000)
       //给大盒子对象绑定鼠标移入移出事件
       box.onmouseover=function(){
           clearInterval(dsq1)
       }
       box.onmouseout=function(){
           dsq1=setInterval(moveMent,3000)
       }
       //给右边按钮绑定点击事件
       rightBtn.onclick=function(){
           moveMent()
       }
       leftBtn.onclick=function(){
           hide1()
           index--
           if(index<0){
               index=4
           }
           show1()
       }
       //遍历li对象
       for(let i=0;i<lis.length;i++){
           //给每个li对象绑定点击事件
           lis[i].onclick=function(){
                hide1()
                //把当前点击的按钮下标赋值给index
                index=i
                show1()
           }
       }

       //隐藏图片
       function hide1(){
           //把当前图片的zindex属性设置为1
           imgs[index].style.zIndex=1
           //把当前图片设置为透明
           imgs[index].style.opacity=0.1
       }
       //显示当前图片
       function show1(){
           //让将要显示的图片
           imgs[index].style.zIndex=2
           move(imgs[index],{opacity:100})
           //先把所有的li对象中的class属性值清空
           for(var j=0;j<lis.length;j++){
               lis[j].className=''
           }
           //给指定的li对象添加class属性值
           lis[index].className='bg'
       }
    </script>

实现透明渐变和元素运动函数代码如下： 

function move(dom,obj,cb){
    //创建对象，存放每个属性的定时器
    var o1={}
    //遍历传入的obj对象
    for(let attr in obj){
        //给o1对象添加键值
        o1[attr]=setInterval(function(){
            //获取起始值
            var start
            //判断当前键名是否为透明度
            if(attr=="opacity"){
                start=getStyle(dom,attr)*100
            }else{
                start=parseInt(getStyle(dom,attr))
            }
            //终点
            var end=obj[attr]
            //判断终点是否大于起点
            if(end>start){
                var speed=5
            }else{
                var speed=-5
            }
            //判断剩余的运动量是否小于等于步长
            if(Math.abs(end-start)<=Math.abs(speed)){
                clearInterval(o1[attr])
                //判断当前属性是否为透明度
                if(attr=="opacity"){
                    dom.style[attr]=end/100
                }else{
                    dom.style[attr]=end+'px'
                }
                //删除对象中的键值对
                delete o1[attr]
                //获取当前o1对象中键值对的个数
                var m=getObj(o1)
                //当前m等于0
                if(m==0){
                    !cb||cb()
                }

            }else{
                if(attr=="opacity"){
                    start+=speed
                    dom.style[attr]=start/100
                }else{
                    start+=speed
                    dom.style[attr]=start+'px'
                }
            }
        },30)
    }
}
//获取样式
function getStyle(dom,attr1){
    if(dom.currentStyle){
        return dom.currentStyle[attr1]
    }else{
        return window.getComputedStyle(dom)[attr1]
    }
}
//获取对象键值对的个数
function getObj(obj){
    var num=0 //键值对的个数
    for(var i in obj){
        num++
    }
    return num
}