/***
参数说明：
now:当前是第几组，默认是0
c:总共有几组
d:初始化时li的个数
e:每组显示li个数
***/
function btnshow(now,c,d,e){
if(d<=e){//如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮
a.find(".ps_next").hide();
a.find(".ps_pre").hide();
}else if(now==0){//初始化now=0，显示第一组，只显示next
a.find(".ps_next").show();
a.find(".ps_pre").hide();
}else if(now==c-1){//显示到最后一组，只显示pre
a.find(".ps_next").hide();
a.find(".ps_pre").show();
}else{//显示中间组，pre和next都需要显示
a.find(".ps_next").show();
a.find(".ps_pre").show();
}
}
接下来幻灯切换。这里a是传入的参数，也就是 #activity-slide。给它下面的所以的pre和next添加响应。
向前一组，组数now减一，now是几，就让ul的margin-left为负几倍的组宽（即3倍的（li宽度+margin宽度）），然后显示对于按钮即可。
向后滑动一组li同理。
function photoscroll(){
a.find(".ps_pre").on("click",function(){//console.log(num);
now--;
if(now >= 0){
a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
btnshow(now,parseInt((lisize+addli)/num),lisize,num);
}
}); a.find(".ps_next").on("click",function(){//console.log(num);
now++;
if(now < (lisize+addli)/num){
a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
btnshow(now,parseInt((lisize+addli)/num),lisize,num);
}
});
btnshow(now,parseInt((lisize+addli)/num),lisize,num);
}
三、实例代码
1、用到图片
2、完整代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
