二、功能分析
1、需求分析
点击左边pre按钮，显示前面三个图片，点击右边的next按钮，显示后面的一组（三个）图片。初始化只显示next按钮，到最后一组只显示pre按钮，中间过程两按钮都显示。
2、html结构分析
<div> <a href="javascript:void(0)"></a> <a href="javascript:void(0)" ></a> <ul> <li><a href="javascript:;"><img src="https://www.jb51.net/images/activity01-1410.jpg"></a></li> <li><a href="javascript:;"><img src="https://www.jb51.net/images/activity02-1410.jpg"></a></li> <li><a href="javascript:;"><img src="https://www.jb51.net/images/activity03-1410.jpg"></a></li> <li><a href="javascript:;"><img src="https://www.jb51.net/images/activity03-1410.jpg"></a></li> <li><a href="javascript:;"><img src="https://www.jb51.net/images/activity02-1410.jpg"></a></li> </ul> </div>
#activity-slide是整个幻灯的入口，后面会将其作为参数来调用幻灯功能。
两个按钮ps_pre和ps_next将添加click事件响应点击切换功能。
3、功能分析
因为左右切换都是三个为一组的切换，如果li总个数不是3的倍数时，需要增加li节点填满。
//需要追加的li节点个数 var addli = 0; //一组切换3个li var num=3; var lisize = a.find("ul li").size();//获取li个数 //判断需要添加的li节点数量 var reminder=lisize%num; if(lisize%num!=0){addli = num-reminder;} else{addli = 0;} addlist();
上面是判断得到需要追加的个数lisize，然后调用addlist追加。
addlist如下，从ul的第一个li开始复制，需要几个就复制出几个节点追加。节点追加完毕后重新计算ul的宽度。
function addlist(){ for(i=0;i<addli;i++){ var html = a.find("ul li").eq(i).html(); a.find("ul").append("<li>"+html+"</li>"); } a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)}); }
现在准备工作已经完成了。接下来就是给按钮添加响应事件。在幻灯切换时涉及到左右按钮的显示和隐藏，所以先说这个按钮显示功能，将此分装成一个函数btnshow。
/*** 参数说明： 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、完整代码