最近做一个本来只有三期活动的页面,后面伟大的需求说后面需求可能增加到n期,所以有一个以三期活动为一组的轮播,实现轮播的插件太多了,但是后端说不希望用插件,因为他那边可能要变动,所以就手动实现了一个简单的轮播效果
var length=$('.ul-nav li').length;
var count=0;
if(length>3){
$('.pre-btn,.next-btn').show();
ul_navs=chunks($('.ul-nav li'),3);
ul_current.push(ul_navs[0]);
for(var i=1;i<ul_navs.length;i++){
console.log(ul_navs[i])
ul_next.push(ul_navs[i]);
$.each(ul_navs[i],function(index,value){
console.log(value)
$(value).addClass('dismiss')
})
}
}
//导航切换
$('.next-btn').click(function(){
console.log(ul_prev);
if(ul_next.length==0){
return false;
}
$.each(ul_current,function(index,value){
$(value).addClass('dismiss');
})
ul_prev.push(ul_current[0]);
ul_current.shift();
ul_current.push(ul_next.shift());
chageClass();
})
$('.pre-btn').click(function(){
if(ul_prev==undefined||ul_prev.length==0){
return false;
}
$.each(ul_current,function(index,value){
$(value).addClass('dismiss');
})
ul_next.unshift(ul_current[0]);
ul_current.shift();
ul_current.push(ul_prev.pop());
chageClass();
})
function chageClass(){
$.each(ul_current[0],function(index,value){
$(value).removeClass('dismiss');
if(index==0){
$(value).addClass('active').siblings().removeClass('active');
var _index=$(value).attr('data-index');
$('.ul-group').eq(_index).show().siblings('.ul-group').hide();
}
})
}