/*

*轮播图特效

*日期：***年**月**日

*姓名：小慕工程师

*/

(function(){

    // 得到元素

    var banner = document.getElementById('banner');

    var carousel_list = document.getElementById('carousel_list');

    var circle_ol = document.getElementById('circle_ol');

    var circle_lis = circle_ol.getElementsByTagName('li');

    // 克隆第一张

    var clone_li = carousel_list.firstElementChild.cloneNode(true);

    //上树

    carousel_list.appendChild(clone_li);

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

   var idx = 0;

   //  节流锁：防止用户鼠标点击次数太多，系统发生错乱

   var lock = true;

    // 设置小圆点的cur属性

    function setCircles(){

        // 遍历

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

            if (i == idx % 3){

                circle_lis[i].className = 'cur';

            }else{

                circle_lis[i].className = '';

            }

        }

    }

    // 事件委托

    circle_ol.onclick = function(e){

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

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

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

        }

        // 改变idx

        idx = n;

        //拉动

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

        //调用改变小圆点函数

        setCircles();

    }

})();