var myslider = function(){
    this.targetel = "";//需要设置成轮播的html对象
    this.startflag = true;
    this.speed = 5000; //每轮切换间隔时间
    this.toggelspeed = 200; //切换图片的间隔时间
    this.delay = 150; //三张图片之间延迟间隔 见timeoutelementchanges注释
    this.arr_items = []; //图片列表数据
    this.slidertemp = '\
            <div class="left">\
            <div>\
                <img src="./loading.gif">\
                <span class="elllipsis desc fix-bottom"></span>\
            </div>\
        </div>\
        <div class="right">\
            <div>\
                <img src="./loading.gif">\
                <span class="elllipsis desc fix-bottom"></span>\
            </div>\
            <div>\
                <img src="./loading.gif">\
                <span class="elllipsis desc fix-bottom"></span>\
            </div>\
        </div>\
        ';
    this.timeoutelementchanges = function (el_img, el_span, item, index) {
        var that = this;
        settimeout(function () {
            //切换图片
            el_img.animate({ opacity: 'toggle' }, that.togglespeed || 200, null, function () {
                el_img.attr('src', item.img_url || '');
                el_img.animate({ opacity: 'toggle' }, that.togglespeed || 200);
            });
            //切换文字描述
            el_span.animate({ opacity: 'toggle' }, that.togglespeed || 200, null, function () {
                el_span.text(item.title || '');
                el_span.animate({ opacity: 'toggle' }, that.togglespeed || 200);
            });
        }, (2 - index) * that.delay); //总共三张图片 这个index是从0开始的 第三张的index是2  (2-2)*deplay 表示第三张图不用延迟，以此类推 得到页面上的效果 显得有层次感
    }
    //初始化
    this.initslider = function (el, items) {
        if ($(el).length == 0) {
            return;
        }
        var that = this;
        $(el).addclass("slider-image-wrap");
        $(el).append(that.slidertemp);
        that.targetel = $(el);
        that.arr_items = json.parse(json.stringify(items));
        that.fillimage(function () {
            setinterval(function () {
                that.fillimage();
            }, that.speed || 3000);
        });
    }
    this.fillimage = function (cb) {
        var that = this;
        //当startflag为true才能继续下一次轮播 因为这里有动画效果消耗了speed一些时间，此判断为消除这个影响
        if (!that.startflag) {
            return;
        }
        that.startflag = false; //进入的时候设置成暂停轮播  等这一轮完成之后 再继续
        $.each(that.arr_items, function (i, item) {
            switch (i) {
                case 0:
                    // that.timeoutelementchanges($('.slider-image-wrap .left>div>img'),$('.slider-image-wrap .left>div>span'),item,0);
                    that.timeoutelementchanges($(that.targetel).find(".left>div>img"), $(that.targetel).find(".left>div>span"), item, 0)
                    break;
                case 1:
                    // that.timeoutelementchanges($('.slider-image-wrap .right>div').eq(0).find('img'),$('.slider-image-wrap .right>div').eq(0).find('span'),item,1);
                    that.timeoutelementchanges($(that.targetel).find(".right>div").eq(0).find('img'), $(that.targetel).find(".right>div").eq(0).find('span'), item, 1)
                    break;
                case 2:
                    that.startflag = true;
                    // that.timeoutelementchanges($('.slider-image-wrap .right>div').eq(1).find('img'),$('.slider-image-wrap .right>div').eq(1).find('span'),item,2);
                    that.timeoutelementchanges($(that.targetel).find(".right>div").eq(1).find('img'), $(that.targetel).find(".right>div").eq(1).find('span'), item, 2)
                    break;
            };
        });
        var first_item = that.arr_items.shift(); //删除数组第一个
        that.arr_items.push(first_item); //把第一个添加到末尾
        cb && cb();
    }
}