自己封装的轮播图

刚开始写页面的时候没有用网上的插件，又因为赶时间没有考虑用户体验，更新迭代时候换掉了。

做法是将获取的图片复制然后添加到ul里，实现左右按钮切换时的无缝切换。

自己做个笔记，以后用到的话直接拿来用了。

var banner = {
num:0,
bstop:true,
maxnum:0,
slidernum:0
};

AJAX取到数据之后给变量赋值：

banner.maxnum = res.length;
banner.num = res.length;

//banner 轮播
$('.slider ul').on('click','li',function(){
if(banner.bstop){//避免多次触发
if(banner.num>=banner.maxnum){
banner.num = banner.num - banner.maxnum;
$('.banner ul').css('left','-'+banner.num*100+'%')
}
$(this).addClass('slider-on').siblings().removeClass('slider-on')
banner.num = $(this).index();
banner.slidernum = $(this).index();
banner.bstop = false
$('.banner ul').animate({'left':'-'+banner.num*100+'%'},1000,function(){
banner.bstop = true
})
}
})
$('#banner-container .r-button').click(function(){
if(banner.bstop){//避免多次触发
banner.bstop = false
banner.num++
banner.slidernum++
$('.banner ul').animate({'left':'-'+banner.num*100+'%'},1000,function(){
if(banner.slidernum>=banner.maxnum){
banner.slidernum = 0;
}
if(banner.num>=2*banner.maxnum-1){
banner.num = banner.maxnum-1;
$('.banner ul').css('left','-'+banner.num*100+'%')
}
$('.slider li').eq(banner.slidernum).addClass('slider-on').siblings().removeClass('slider-on')
banner.bstop = true;
})
}
});
$('#banner-container .l-button').click(function(){
if(banner.bstop){//避免多次触发
banner.bstop = false
if(banner.slidernum == 0){
banner.num = banner.maxnum
$('.banner ul').css('left','-'+banner.num*100+'%')
}
banner.num--
banner.slidernum--
$('.banner ul').animate({'left':'-'+banner.num*100+'%'},1000,function(){
if(banner.num<=0){
banner.num = banner.maxnum;
banner.slidernum = 0;
$('.banner ul').css('left','-'+banner.num*100+'%')
}
$('.slider li').eq(banner.slidernum).addClass('slider-on').siblings().removeClass('slider-on')
banner.bstop = true;
})
}
});

讲真，还是用插件的方便