轮播图的小案例

轮播图的小案例

css样式：

body,ol{

        margin: 0;

        padding: 0;

        list-style: none;
    }

    .wrapper{

        width: 600px;

        margin: 50px auto;

        position: relative;
    }

    .wrapper>img{

        width: 600px;

        height: 400px;
    }

    .wrapper span{

        width: 60px;

        height: 80px;

        background: rgba(0, 0, 0, 0.4);

        font: 30px/80px "微软雅黑";

        text-align: center;

        color: #fff;

        cursor: pointer;

        user-select: none;

        position: absolute;

        top: 160px;

    }

    .wrapper xh{

        margin-left: 250px;

    }

    .wrapper sx{

        margin-right: 250px;

    }

    .wrapper .prev{

        left: 10px;
    }

    .wrapper .next{

        right: 10px;
    }

    .wrapper ol{

        position: absolute;

        bottom: 20px;

        border-radius: 8px;

        padding: 10px;

        background: rgba(0, 0, 0, 0.5);

        height: 20px;
    }

    .wrapper li{

        float: left;

        width: 20px;

        height: 20px;

        border-radius: 50%;

        margin: 0 5px;

        background: #ccc;
    }

    .wrapper .active{

        background: gold;
    }

html结构：

<div class="wrapper">
    <button class="xh">循环播放</button>
    <button class="sx">顺序播放</button>
    <img src="" alt="">
    <span class="prev">&#60</span>
    <span class="next">&#62</span>
    <ol></ol>
</div>

js代码：

var wrap = document.querySelector('.wrapper');

    var xh = document.querySelector('.wrapper .xh');

    var sx = document.querySelector('.wrapper .sx');

    var img = document.querySelector('.wrapper img');

    var spans = document.querySelectorAll('.wrapper span');

    var ol = document.querySelector('.wrapper ol');

    var url = ['img/01.jpg','img/1.jpg','img/02.jpg','img/2.jpg','img/03.jpg','img/3.jpg'];

    var index = 0;

    img.src = url[index];

    for (var i = 0; i < url.length; i++) {

        if(i==0){

            ol.innerHTML+='<li class="active"></li>';
        }else{

            ol.innerHTML+='<li></li>';
        }

    }

    var lis = document.querySelectorAll('ol li');

    ol.style.left = (wrap.offsetWidth-ol.offsetWidth)/2+"px";

    fn();

    var Timer = setInterval(fn, 1000);

    function fn(){

        index++;

            index%=url.length;

            img.src = url[index];

            for (var i = 0; i < lis.length; i++) {

                  lis[i].classList.remove('active');

            }

            lis[index].classList.add('active');

    }

    wrap.onmouseover = function(){

         clearInterval(Timer);

         wrap.onmouseout = function(){

              Timer = setInterval(fn, 1000);

         }

    }

    xh.onclick = function(){

        spans[1].onclick = function(){

            fn();

        }

        spans[0].onclick = function(){

            if(index==0){

                index = url.length-1;
            }else{

                index--;
            }

            img.src = url[index];

            for (var i = 0; i < lis.length; i++) {

                  lis[i].classList.remove('active');

            }

            lis[index].classList.add('active');

        }

    }

    sx.onclick = function(){

        spans[1].onclick = function(){

            index++;

            if(index>=url.length){

                window.alert('这是最后一张图片');

            }else{

                img.src = url[index];

                clearCn(lis,'active');

                lis[index].classList.add('active');

            }

        }

        spans[0].onclick = function(){

            if(index==0){

                window.alert('这已经是第一张图片');

            }else{

                index--;
            }

            img.src = url[index];

            for (var i = 0; i < lis.length; i++) {

                  lis[i].classList.remove('active');

            }

            lis[index].classList.add('active');

        }

    }

    for (var i = 0; i < url.length; i++) {

        lis[i].index = i;//把i值存起来

        lis[i].onmouseenter = function() {

            index = this.index;

            img.src = url[this.index];

            for (var i = 0; i < lis.length; i++) {

                  lis[i].classList.remove('active');

            }

            this.classList.add('active');

        }

    }