js-原生轮播图

 <section class="banner" id="banner">

       

        <ul id="carousel_list" class="carousel_list">

            <li>  <img src="images/banner1.jpg" alt="">  </li>

            <li>  <img src="images/banner2.jpg" alt="">  </li>

            <li>  <img src="images/banner3.jpg" alt="">  </li>

            <li>  <img src="images/banner4.jpg" alt="">  </li>

            <li>  <img src="images/banner5.jpg" alt="">  </li>

        </ul>

        <ol class="circles" id="circle_ol">

            <li data-n='0' class="current"></li>

            <li data-n='1'></li>

            <li data-n='2'></li>

            <li data-n='3'></li>

            <li data-n='4'></li>

        </ol>

    </section>

.banner  {

    position: relative;

    overflow: hidden;

}

.banner .carousel_list {

    width: 600%;

    /* 清除浮动 */

    overflow: hidden;

    /* translateX中的百分数表示相对于它本身的宽度的多少倍 */

    /* transform: translateX(-33.333%); */

    transition: transform .5s ease 0s;

}

.banner .carousel_list li{

    float: left;

    width: 16.666%;

}

.banner .carousel_list li img {

    width: 100%;

    /* 白边的处理 */

    vertical-align: middle;

}

.banner .circles{

    width: 160px;

    height: 20px;

    position: absolute;

    bottom: 10px;

    left: 50%;

    margin-left: -75px;

    z-index: 9999;

}

.banner .circles li {

    width: 20px;

    height: 20px;

    float: left;

    background-color:rgb(27,233,147);

    margin-right: 10px;

    border-radius: 10px;

    transition: all .5s ease 0s;  

    cursor: pointer;

}

.banner .circles li.current{

    width: 40px;

    background-color: #20BD9A  ;

}

.banner .circles li:last-child{

    margin-right: 0;

}

 

 

// 轮播图特效

(function(){

    // 获取元素

    var carousel_list = document.getElementById('carousel_list')

    var left_btn = document.getElementById('left_btn')

    var right_btn = document.getElementById('right_btn')

    var banner = document.getElementById('banner')

    var circle_ol = document.getElementById('circle_ol')

    var circle_lis = circle_ol.getElementsByTagName('li')

     

    //  克隆第一张li

    var clone_li = carousel_list.firstElementChild.cloneNode(true)

    // 插入元素

    carousel_list.appendChild(clone_li)

    // 当前显示的图片序号 从0 开始

    var idx = 0

    // 节流锁

    var lock = true

    // 右按钮事件监听

    right_btn.onclick = right_btn_handler

     

   

    // 右按钮的处理函数

    function right_btn_handler(){

        // 判断节流锁状态 如果是关闭 就什么都不做

        if(!lock) return ;

        // 关锁

        lock = false

        // 加上过渡

        carousel_list.style.transition = 'transform .5s ease 0s'

        //  序号 + 1

        idx++

        // 拉动

        carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)'

        // 判断是否为最后一张  如果是 就瞬间移动回来

        if(idx > 4){

            setTimeout(function(){

                // 去掉过渡

                carousel_list.style.transition = 'none'

                // 删除transform 属性

                carousel_list.style.transform = 'none'

                // 全局序号变为0

                idx = 0

            },500)

        }

        // 设置小圆点

        setCircles()

        // 开锁 动画结束之后

        setTimeout(function(){

            lock = true

        },500)

    }

    // 左按钮事件监听

    left_btn.onclick = function(){

         // 判断节流锁状态 如果是关闭 就什么都不做

         if(!lock) return ;

         // 关锁

         lock = false

        // 判断是否为最后一张  如果是 就瞬间移动回来

        if(idx == 0){

            // 去掉过渡

            carousel_list.style.transition = 'none'

            // 拉到最后

            carousel_list.style.transform = 'translateX(' + -16.66 * 5 + '%)'

            // 改变序号

            idx = 4

            setTimeout(function(){

                // 加上过渡

                carousel_list.style.transition = 'transform .5s ease 0s'

                carousel_list.style.transform = 'translateX(' + -16.66 * 4 + '%)'  

            },0)

        }else{

            //  序号 + 1

            idx--

            // 拉动

            carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)'

        }

        // 设置小圆点

        setCircles()

        // 开锁 动画结束之后

        setTimeout(function(){

            lock = true

        },500)

    }

    // 设置小圆点的current

    function setCircles(){

        // 遍历

        for(var i=0;i <=4;i++){

            if(i == idx % 5){

                circle_lis[i].className = 'current'

            }else{

                circle_lis[i].className = ''

            }

        }

    }

    // 事件委托 小圆点的监听

    circle_ol.onclick = function(e){

        if(e.target.tagName.toLowerCase() == 'li'){

            // 得到 li 身上的 data-n 属性 就是 n

            var n = e.target.getAttribute('data-n')

             //  改变序号

             idx = n

             // 拉动

             carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)'

            // 设置小圆点

            setCircles()

        }  

    }

    // 定时器 自动轮播

    var timer = setInterval(right_btn_handler, 2000);

   

    // 鼠标进入  自动暂停轮播

    banner.onmouseenter = function(){

        clearInterval(timer)

    }

    // 鼠标离开  自动暂停开始

    banner.onmouseleave = function(){

        clearInterval(timer)

        timer = setInterval(right_btn_handler, 2000);

    }

 

})()