原生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:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="arrow left">&lt;</a>
        <a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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
}