轮播图(透明)

轮播图思想
轮播图就是只要做出右点击就基本没什么了，透明轮播图当点击下一张时让当前图片透明度变为0，下一张图变为1。话不多说，代码双手奉上：

/*HTMl代码*/
<div class="box">
            <ul class="item">
                <li style="opacity: 1"><img src="images/1.jpg"></li>
                <li><img src="images/2.jpg"></li>
                <li><img src="images/3.jpg"></li>
                <li><img src="images/4.jpg"></li>
                <li><img src="images/5.jpg"></li>
            </ul>
            <button class="leftBtn">&lt;</button>
            <button class="rightBtn">&gt;</button>

            <ul class="page">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
</div>

/*css代码*/
<style type="text/css">
            .item li {
                list-style: none;
                width: 590px;
                height: 340px;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
            }

            img {
                width: 100%;
                height: 100%;
            }

            .leftBtn {
                position: absolute;
                left: 0;
                top: 0;
            }

            .rightBtn {
                position: absolute;
                right: 0;
                top: 0;
            }

            div {
                position: relative;
                width: 590px;
                height: 340px;
            }

            .page {
                position: absolute;
                bottom: 50px;
                left: 200px;
                height: 30px;
                /*width: 300px;*/
            }

            .page li {
                float: left;
                width: 30px;
                height: 30px;
                list-style: none;
                background: red;
                border-radius: 50%;
                line-height: 30px;
                text-align: center;
            }
        </style>

/*js主要代码*/
<script type="text/javascript">
            var item = document.getElementsByClassName('item')[0];
            //console.log(item);
            var oLis = item.getElementsByTagName('li');
            //console.log(oLis);

            //右点击
            var courrent = 0; //记录当前图片的位置
            var rightBtn = document.getElementsByClassName('rightBtn')[0];
            //console.log(rightBtn);
            rightBtn.onclick = function() {
                animate(oLis[courrent], {
                    opacity: 0
                });
                courrent++;
                //当点击到第五张图片时，courrent为4，点击下一张应该为第一张图片 所以做判断courrent为5时，把courrent改为0
                if(courrent == 5) {
                    courrent = 0;
                }
                showCurrentPagePoint(courrent);
                animate(oLis[courrent], {
                    opacity: 1
                });
            }

            //左点击 和右点击基本一样

            var leftBtn = document.getElementsByClassName('leftBtn')[0];
            //console.log(leftBtn);
            leftBtn.onclick = function() {
                animate(oLis[courrent], {
                    opacity: 0
                });
                courrent--;
                if(courrent == -1) {
                    courrent = 4;
                }
                showCurrentPagePoint(courrent);
                animate(oLis[courrent], {
                    opacity: 1
                });
            }

            // 自动播放
            var autoPlayTimer = setInterval(function() {
                rightBtn.onclick();
            }, 2000);

            //当鼠标移入item时，自动播放停止
            item.onmouseenter = function() {
                clearInterval(autoPlayTimer);
            }
            //当鼠标移出item时，自动继续播放，并从停止的位置开始播放
            item.onmouseleave = function() {
                autoPlayTimer = setInterval(function() {
                    rightBtn.onclick();
                }, 2000);
            }

            //当图片在动的时候小圆点也在跟着图片动
            function showCurrentPagePoint(courrent){
                var oPage = document.getElementsByClassName('page')[0];
                var oLis = oPage.getElementsByTagName('li');
                for (var i = 0; i < oLis.length; i++) {
                    oLis[i].style.background = 'red';
                }
                oLis[courrent].style.background = 'white';
            }
            //这里调用一次是因为打开网页的时候第一个圆点为白色
            showCurrentPagePoint(0);

            //当点击小圆点时切换图片

            var oPage = document.querySelectorAll('.page li')

            for (let i = 0; i < oPage.length; i++) {
                oPage[i].onclick = function(){
                    //console.log(this);
                    console.log(i)
                    animate(oLis[courrent],{opacity:0});
                    courrent = i;
                    animate(oLis[courrent],{opacity:1});
                    showCurrentPagePoint(courrent);
                }
            }
        </script>

/*js运动代码（函数）*/
function animate(div,obj) {
    //console.log(cb)

    //{left:100;top:200}
    //{left:100}
    //{left:100}
    clearInterval(div.timer);

    div.timer =  setInterval(function () {
            var flag = true;//假设已经到了目的地
            //1-0.5
            //100  50
            for(var key in obj){
                // console.log(key)//left   top   getStyle['left']
                // console.log(obj[key])//300
                var target = obj[key];
                if(key == 'opacity'){
                    var speed = (target - parseFloat(getStyle(div)[key]))*100/8;
                   // console.log(speed,'speed1')
                    speed = (speed>0? Math.ceil(speed): Math.floor(speed));
                    //console.log(speed,'speed2')

                    var op = parseFloat(getStyle(div)[key]) + speed/100;
                   // console.log(op)

                    div.style[key]=  op;
                    if(parseFloat(getStyle(div)[key]) !=target ){
                        flag = false;
                    }

                }else{
                    var speed = (target - parseInt(getStyle(div)[key]))/8;
                    speed = (speed>0? Math.ceil(speed): Math.floor(speed));
                    div.style[key]= parseInt(getStyle(div)[key]) + speed +'px';
                    if(parseInt(getStyle(div)[key]) !=target ){
                        flag = false;
                    }
                }





            }

            //必须等到所有的 属性都到达目的地 才能结束定时器
            if(flag == true){
                clearInterval(div.timer);



            }

        },30);

}

function getStyle(ele) {
    if(ele.currentStyle){
        return ele.currentStyle;
    }else{
        return getComputedStyle(ele,null);
    }
}