原生js+css实现淡入轮播图

原生js+css实现淡入轮播图

原理：定时器和透明度的配合使用

html代码如下：

<div>
    <ul>
    <span>&gt;</span><span style="right: 55px">&lt;</span>
    </ul>
    <p>
    </p>
</div>

css样式如下：

*{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul{
            width: 750px;
            height: 450px;
            margin: 0 auto;
            position: relative;
        }
        ul li{
            position: absolute;
            opacity: 0;
        }
        ul span{
            display: block;
            width: 50px;
            height: 100px;
            background-color: rgba(0,0,0,.3);
            color: rgba(0,0,0,.5);
            position: absolute;
            right: 0;
            top:175px;
            line-height: 100px;
            font-size: 42px;
            text-align: center;
            cursor: pointer;
            z-index: 5;
        }
        p{
            width: 100%;
            text-align: center;
            position: absolute;
            top:400px;
        }
        p span{
            display: inline-block;
            width: 20px;
            height: 5px;
            background-color: rgba(0,0,0,.3);
            margin-left: 5px;

        }
        div{
            width: 100%;
            background-color: #E3AE00;
        }

json：

{
  "banner":[
    {"src":"//gfs13.gomein.net.cn/T11sZXBTAT1RCvBVdK.jpg","bg":"#E3AE00"},
    {"src":"//gfs10.gomein.net.cn/T1V1JXBsVv1RCvBVdK.jpg","bg":"#E3AE00"},
    {"src":"//gfs12.gomein.net.cn/T1q1DXB_CT1RCvBVdK.jpg","bg":"#E9760F"},
    {"src":"//gfs13.gomein.net.cn/T1IfCXBQCv1RCvBVdK.jpg","bg":"#EBE9F4"},
    {"src":"//gfs13.gomein.net.cn/T1KjhXBjVT1RCvBVdK.jpg","bg":"#063CFF"},
    {"src":"//gfs11.gomein.net.cn/T1mrxXBgEv1RCvBVdK.jpg","bg":"#C9773D"},
    {"src":"//gfs12.gomein.net.cn/T1zrYXBmKT1RCvBVdK.jpg","bg":"#54AAB7"},
    {"src":"//gfs13.gomein.net.cn/T1ju_XBgKv1RCvBVdK.jpg","bg":"#060912"}
  ]
}

js代码如下：
js库连接：小小js库/Jser.js

<script src="Jser.js"></script>
<script>
    var oDiv = document.getElementsByTagName("div")[0];
    var oUl = document.getElementsByTagName("ul")[0];
    var oLi = document.getElementsByTagName("li");
    var oBtn = oUl.getElementsByTagName("span");
    var oP = document.getElementsByTagName("p")[0];
    var oSpan = oP.getElementsByTagName("span");
    //ajax获取banner.json中的数据
    var s = ujiuye.ajax({
        "url":"banner.json",
        "type":"get",
        "success":function(data){
            for(var x = 0 ; x <data.banner.length;x++){
                //将banner.json中的数据添加到ul中
                oUl.innerHTML +="<li><img src =" +data.banner[x].src+"></li>"
                oP.innerHTML +="<span></span>";
                oLi[0].style.opacity = 100;
                oSpan[0].style.backgroundColor = "yellow";
            }
            var i = 0;
            //添加定时器
            var timer = setInterval(function banner() {
                right();
            },2000);
            //鼠标移入清除定时器
            oUl.onmouseover = function () {
                clearInterval(timer);
            };
            //鼠标移出打开定时器
            oUl.onmouseout = function(){
                timer = setInterval(function banner() {
                    right();
                },2000);
            };
            //点击右箭头
            oBtn[0].onclick = right;
            function right(){
                i++;
                for(var j = 0;j<oLi.length;j++){
                    Jser.bufferMove(oLi[j],{"opacity":0});
                }
                if(i>oLi.length-1){
                    i = 0;
                }
                Jser.bufferMove(oLi[i],{"opacity":100});
                for(var m = 0 ; m<oSpan.length;m++){
                    oSpan[m].style.backgroundColor = "rgba(0,0,0,.3)";
                }
                oSpan[i].style.backgroundColor = "yellow";
                oDiv.style.backgroundColor = data.banner[i].bg
            }
            //点击左箭头
            oBtn[1].onclick = function () {

                for(var j = 0;j<oLi.length;j++){
                    Jser.bufferMove(oLi[j],{"opacity":0});
                }
                if(i<1){
                    i=oLi.length;
                }
                Jser.bufferMove(oLi[i-1],{"opacity":100});
                i--;
                oDiv.style.backgroundColor = data.banner[i].bg
                for(var m = 0 ; m<oSpan.length;m++){
                    oSpan[m].style.backgroundColor = "rgba(0,0,0,.3)";
                }
                oSpan[i].style.backgroundColor = "yellow"
            };
            //小方划过块
            for(var n = 0 ; n <oSpan.length;n++){
                oSpan[n].index = n;
                oSpan[n].onmouseover = function () {
                    for(var m = 0 ; m<oSpan.length;m++){
                        oSpan[m].style.backgroundColor = "rgba(0,0,0,.3)";
                        Jser.bufferMove(oLi[m],{"opacity":0});
                    }
                    this.style.backgroundColor = "yellow";
                    oDiv.style.backgroundColor = data.banner[this.index].bg;
                    Jser.bufferMove(oLi[this.index],{"opacity":100});
                    i = this.index;
                }
            }
        }
    });
    ```