CocoRoboDesktop/js/Controls/Basic/Banner.js

//电脑端banner滑块控件命名空间
Namespace.register("U.MD.UI.slider");

/**
电脑端banner滑块控件
*/

/**
@box {object} 存放控件的div的id
@imgarr {array} 存放图片的数组
@speed {string} 轮播速度
@cut {bool} 判断左右切换按钮是否出现
@dot {bool} 判断小圆点是否出现
@cb {回调callback} 引用方法
**/

U.MD.UI.slider = function (box, imgarr, attr) {
    //定义传输进来的参数
    var _speed = attr.speed;
    var _arrow = attr.arrow;
    var _dot = attr.dot;
    var _moveFun = attr.moveFun;

    //快速创建存放图片的ul
    var _sliderimgul = $$("ul", { className: 'U_MD_UI_slider_ImgList' }, box);

    //在数组的第一个插入最后一张图片
    imgarr.unshift(imgarr[imgarr.length - 1]);

    //在arrImg[]最后放第一张图片
    imgarr.push(imgarr[1]);

    //for循环创建需要的li
    for (i = 0; i < imgarr.length; i++) {
        var _sliderimgli = $$("li", { className: '' }, _sliderimgul),
            _sliderImg = $$("img", { className: '', src: imgarr[i] }, _sliderimgli); //"onerror": U.MD.C.imgError, 
    }

    //快速创建存放左右按钮的ul
    var _sliderbtnul = $$("ul", { className: 'U_MD_UI_slider_Btn' }, box),
        _sliderbtnlil = $$("li", { className: 'U_MD_UI_slider_Left', innerHTML: '<' }, _sliderbtnul),
        _sliderbtnlir = $$("li", { className: 'U_MD_UI_slider_Right', innerHTML: '>' }, _sliderbtnul);

    //快速创建存放小圆点的ul
    var _sliderpointul = $$("ul", { className: 'U_MD_UI_slider_Point' }, box);

    //快速创建li,li的长度为图片的减两张（补图法）
    for (i = 0; i < imgarr.length - 3; i++) {
        //第一个li时，定义第一个li的class
        if (i == 0) {
            $$("li", { className: 'U_MD_UI_slider_On' }, _sliderpointul)[0];
        }
        $$("li", { className: '' }, _sliderpointul)[i];
    }

    //定义父元素的宽度
    var _boxidwidth = box.offsetWidth;

    //定义父元素的高度
    var _boxidheight = box.offsetHeight;

    //定义class为U_MD_UI_slider_ImgList
    var _sliderimglist = box.getElementsByClassName("U_MD_UI_slider_ImgList")[0];

    var _sliderimgli = _sliderimglist.getElementsByTagName("li");

    //定义class为U_MD_UI_slider_Btn
    var _sliderbtn = document.getElementsByClassName("U_MD_UI_slider_Btn")[0];

    //定义class为U_MD_UI_slider_Point
    var _sliderpoint = box.getElementsByClassName('U_MD_UI_slider_Point')[0];

    //定义class为_sliderbtn的所有li
    var _btnli = _sliderbtn.getElementsByTagName("li");

    //定义class为_sliderimglist的li长度
    var _listlen = _sliderimglist.getElementsByTagName("li").length;

    //定义图片索引为1
    var _listindex = 1;

    //定义_sliderpoint里的li
    var _pointdot = _sliderpoint.getElementsByTagName("li");

    //定义_pointdot.length
    var _dotlen = _pointdot.length;

    //定义小圆点索引为0
    var _dotindex = 0;

    //初始化timer
    var timer = null;

    //如果obj.dot为true则显示小圆点
    if (_dot) {
        _sliderpoint.style.display = "block";
    } else {
        _sliderpoint.style.display = "none";
    }

    /** Banner宽度和高度跟随父元素 **/
    //定义_sliderimglist里的li
    var _sliderli = _sliderimglist.getElementsByTagName("li");

    //所有图片的高宽等于盒子
    for (var i = 0; i < _sliderli.length; i++) {
        _sliderli[i].style.width = _boxidwidth + "px";
        _sliderli[i].style.height = _boxidheight + "px";
    }

    //存放图片的ul的总宽度（盒子长度*图片数量）
    _sliderimglist.style.width = (_boxidwidth * imgarr.length) + "px";

    //第一张图片的位置
    _sliderimglist.style.left = -_boxidwidth + "px";

    //左右切换按钮宽度跟随盒子宽度
    _sliderbtn.style.width = _boxidwidth + "px";

    /** 鼠标停留计时器停止或启动、左右按钮显示 **/
    //鼠标停留
    box.onmouseover = function () {
        //如果obj.cut为true则显示按钮
        if (_arrow) {
            _sliderbtn.style.display = "block";
        } else {
            _sliderbtn.style.display = "none";
        }
        //清除计时器
        clearInterval(timer);
    }

    //鼠标离开
    box.onmouseout = function () {
        _sliderbtn.style.display = "none";
        //启动计时器
        timer = setInterval(auto, _speed);
    }

    //定义当前时间
    var sTime = new Date();

    //左边按钮
    _btnli[0].onclick = function () {
        //定义点击后的时间
        var nTime = new Date();
        //点击后时间距离下次点击要大于500ms才能继续下次点击
        if (nTime - sTime > 500) {
            //图片索引和小圆点索引减少
            _listindex--;
            _dotindex--;
            if (_listindex == 0) {
                //调用move函数
                move(_sliderimglist, { left: -_boxidwidth * _listindex }, function () {
                    _listindex = _listlen - 2;
                    this.style.left = -_listindex * _boxidwidth + "px";
                });
            } else {
                move(_sliderimglist, { left: -_boxidwidth * _listindex });
            }
            //小圆点移动
            _dotindex = _dotindex == -1 ? _dotlen - 1 : _dotindex;
            moveBtn(_dotindex);
            _moveFun && _moveFun(_dotindex + 1);
        }
        sTime = new Date();
    }

    //右边按钮
    _btnli[1].onclick = function () {

        //定义点击后的时间
        var nTime = new Date();
        //点击后时间距离下次点击要大于500ms才能继续下次点击
        if (nTime - sTime > 500) {
            //图片索引和小圆点索引增加
            _listindex++;
            _dotindex++;
            //小圆点索引清零
            _dotindex = _dotindex % _dotlen;
            //图片到最后一张时索引清零重新计算
            if (_listindex == _listlen - 1) {
                move(_sliderimglist, { left: -_boxidwidth * _listindex }, function () {
                    _listindex = 1;
                    this.style.left = -_listindex * _boxidwidth + "px";
                });
            } else {
                move(_sliderimglist, { left: -_boxidwidth * _listindex });
            }
            //小圆点移动
            moveBtn(_dotindex);
            _moveFun && _moveFun(_dotindex + 1);
        }
        sTime = new Date();
    }
    //定义自动轮播
    timer = setInterval(auto, _speed);

    if (_dotindex == 0) {
        console.log(_dotindex + 1);
    }
    //自动轮播
    function auto() {
        /* for (var i = 0; i < _sliderimgli.length; i++) {
        _sliderimgli[i]._listindex = i;
        //点击小圆点
        //_listindex = this._listindex;
        console.log(_listindex+1);
        }*/
        //图片索引和小圆点索引
        _listindex = ++_listindex % _listlen;
        _dotindex++;
        //小圆点索引清零
        _dotindex = _dotindex % _dotlen;
        //图片到最后一张时索引清零重新计算
        if (_listindex == _listlen - 1) {
            move(_sliderimglist, { left: -_boxidwidth * _listindex }, function () {
                _listindex = 1;
                this.style.left = -_listindex * _boxidwidth + "px";
            });
        } else {
            move(_sliderimglist, { left: -_boxidwidth * _listindex });
        }
        moveBtn(_dotindex);
        _moveFun && _moveFun(_dotindex + 1);
    }
    //遍历小圆点
    for (var i = 0; i < _dotlen; i++) {
        _pointdot[i]._listindex = i;
        //点击小圆点
        _pointdot[i].onclick = function () {
            _dotindex = this._listindex;
            _listindex = _dotindex + 1;
            move(_sliderimglist, { left: -_boxidwidth * _listindex });
            moveBtn(_dotindex);
            //console.log(_dotindex);

        }
    }
    //小圆点样式
    function moveBtn(_dotindex) {
        for (var j = 0; j < _dotlen; j++) {
            _pointdot[j].className = "";
        }
        _pointdot[_dotindex].className = "U_MD_UI_slider_On";
    }
}
/*
切换过程函数
@dom {object} 需要移动的对象
@json {Array}向某个方向移动的距离
@callback {回调callback}
*/
function move(dom, json, callback) {
    //清除计时器
    clearInterval(dom.timer);
    dom.timer = setInterval(function () {
        //true这个计时器用来标记json中所有的attr已到达target目标
        var mark = true;
        for (var attr in json) {
            var cur = null;
            if (attr == "opacity") {
                cur = getStyle(dom, attr) * 100;
            } else {
                cur = parseInt(getStyle(dom, attr)) || 0;
            }
            var target = json[attr];
            // console.log(target);
            // console.log(cur);
            var speed = (target - cur) * .2;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (cur != target) {
                if (attr == "opacity") {
                    dom.style.filter = "alpha(opacity = " + (cur + speed) + ")"; //ie
                    dom.style[attr] = (cur + speed) / 100; //0~1
                } else {
                    dom.style[attr] = cur + speed + "px";
                }
                //false表明当前的这个attr没有达到目标
                mark = false;
            }
            //console.log(cur);
            //console.log(1);
        }
        if (mark) {
            clearInterval(dom.timer);
            callback && callback.call(dom);
        }
    }, 100 / 3);
}
function getStyle(dom, attr) {
    return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, null)[attr];
}