var myslider = function(){
this.targetel = "";//需要设置成轮播的html对象
this.startflag = true;
this.speed = 5000; //每轮切换间隔时间
this.toggelspeed = 200; //切换图片的间隔时间
this.delay = 150; //三张图片之间延迟间隔 见timeoutelementchanges注释
this.arr_items = []; //图片列表数据
this.slidertemp = '\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
';
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();
}
}