一、最终效果
二、功能分析1、需求分析点击左边PRe按钮，显示前面三个图片，点击右边的next按钮，显示后面的一组（三个）图片。初始化只显示next按钮，到最后一组只显示pre按钮，中间过程两按钮都显示。
效果图是最终效果有做响应式，但这不是重点，不做介绍。
2、html结构分析<divclass="activity"id="activity-slide"><ahref="javascript:void(0)"class="pg_left ps_pre"></a><ahref="Javascript:void(0)"class="pg_right ps_next"></a><ulclass="clearfix"><li><ahref="javascript:;"><imgsrc="images/activity01-1410.jpg"></a></li><li><ahref="javascript:;"><imgsrc="images/activity02-1410.jpg"></a></li><li><ahref="javascript:;"><imgsrc="images/activity03-1410.jpg"></a></li><li><ahref="javascript:;"><imgsrc="images/activity03-1410.jpg"></a></li><li><ahref="javascript:;"><imgsrc="images/activity02-1410.jpg"></a></li></ul></div>
#activity-slide是整个幻灯的入口，后面会将其作为参数来调用幻灯功能。
两个按钮ps_pre和ps_next将添加click事件响应点击切换功能。
3、功能分析因为左右切换都是三个为一组的切换，如果li总个数不是3的倍数时，需要增加li节点填满。
//需要追加的li节点个数varaddli = 0;//一组切换3个livarnum=3;varlisize = a.find("ul li").size();//获取li个数//判断需要添加的li节点数量varreminder=lisize%num;if(lisize%num!=0){addli = num-reminder;}else{addli = 0;}
addlist();
上面是判断得到需要追加的个数lisize，然后调用addlist追加。
addlist如下，从ul的第一个li开始复制，需要几个就复制出几个节点追加。节点追加完毕后重新计算ul的宽度。
functionaddlist(){for(i=0;i<addli;i++){varhtml = 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个数
***/functionbtnshow(now,c,d,e){if(d<=e){//如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮a.find(".ps_next").hide();
a.find(".ps_pre").hide();
}elseif(now==0){//初始化now=0，显示第一组，只显示nexta.find(".ps_next").show();
a.find(".ps_pre").hide();
}elseif(now==c-1){//显示到最后一组，只显示prea.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同理。
functionphotoscroll(){
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);
}
4、问题可能是jquery写的原因，加了浏览器缩放尺寸响应后点击切换按钮响应有延时。
三、代码1、用到图片
2、完整代码完整代码
<!DOCTYPE HTML><html><head><metacharset="utf-8"><title></title><linkrel="stylesheet"type="text/css"href="css/style.css"><script>window.onresize=function(){varwinWidth=document.body.clientWidth;if(winWidth<=1180){
body.className="grid-960";
}elseif(winWidth<=1410){
body.className="grid-1180";
}elseif(winWidth>1410){
body.className="grid-1410";
}else{
alert("do not know!");
}
}</script></head><bodyid="body"class=""><script>//初始化状态显示样式判断,放在body后面varwinWidth=document.body.clientWidth;if(winWidth<=1180){
body.className="grid-960";
}elseif(winWidth<=1410){
body.className="grid-1180";
}elseif(winWidth>1410){
body.className="grid-1410";
}else{
alert("do not know!");
}</script><divclass="wapper"><divclass="section"><h2class="title">热门活动</h2><divclass="activity"class="movie"id="activity-slide"><ahref="javascript:void(0)"class="pg_left ps_pre"></a><ahref="javascript:void(0)"class="pg_right ps_next"></a><ulclass="clearfix"><li><ahref="javascript:;"><imgsrc="images/activity01-1410.jpg"></a></li><li><ahref="javascript:;"><imgsrc="images/activity02-1410.jpg"></a></li><li><ahref="javascript:;"><imgsrc="images/activity03-1410.jpg"></a></li><li><ahref="javascript:;"><imgsrc="images/activity03-1410.jpg"></a></li><li><ahref="javascript:;"><imgsrc="images/activity02-1410.jpg"></a></li></ul></div></div></div></body></html><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><script>//首页图片滚动切换(function($){
$.photolist=function(a){varw_li=a.find("li").width();varh_li=a.find("li").height();varmargin_li=parseInt(a.find("li").css("marginLeft"));varnow=0;varnum=0;varaddli=0;varlisize=a.find("ul li").size();varhtmlall=a.find("ul").html();//判断每次滚动数量/*var w_body = $("body").width();
if(w_body <=1170){
var num = 3;
}else if(w_body<= 1380){
var num = 4;
}else if(w_body>1380){
var num = 5;
}*/varnum=3;//判断需要添加的li节点数量varreminder=lisize%num;if(lisize%num!=0){addli=num-reminder;}else{addli=0;}
addlist();//点击滚动事件photoscroll();
$(window).resize(function(){//location.reload();now=0;
addli=0;
a.find("ul").html(htmlall);//html内容还原初始值a.find(".ps_next").show();//按钮样式初始化a.find(".ps_pre").hide();//判断每次滚动数量/*var w_body = $("body").width();
if(w_body <=1170){
var num = 3;
}else if(w_body<= 1380){
var num = 4;
}else if(w_body>1380){
var num = 5;
}*/varnum=3;//判断需要添加的li节点数量varreminder=lisize%num;if(lisize%num!=0){addli=num-reminder;}else{addli=0;}
addlist();
w_li=a.find("li").width();
margin_li=parseInt(a.find("li").css("marginLeft"));
a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});
a.find("ul").animate({"margin-left":0});//ul位置还原btnshow(now,parseInt((lisize+addli)/num),lisize,num);});functionaddlist(){for(i=0;i<addli;i++){varhtml=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)});//console.log(a.find("ul li").size());}functionphotoscroll(){
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);}/***
参数说明：
now:当前是第几组，默认是0
c:总共有几组
d:初始化时li的个数
e:每组显示li个数
***/functionbtnshow(now,c,d,e){if(d<=e){//如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮a.find(".ps_next").hide();
a.find(".ps_pre").hide();
}elseif(now==0){//初始化now=0，显示第一组，只显示nexta.find(".ps_next").show();
a.find(".ps_pre").hide();
}elseif(now==c-1){//显示到最后一组，只显示prea.find(".ps_next").hide();
a.find(".ps_pre").show();
}else{//显示中间组，pre和next都需要显示a.find(".ps_next").show();
a.find(".ps_pre").show();
}
}
}
})(jQuery);
$.photolist($("#activity-slide"));</script>
View Code
css部分：
@charset "utf-8";
body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, button, textarea, table, tbody, tfoot, thead, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video{margin:0;padding:0;outline:nonebackground:transparent;
}article, aside, dialog, figure, footer, header, hgroup, nav, section{display:block; }body, button, input, select, textarea{font:12px/1.5 arial, \5b8b\4f53, sans-serif; }h1, h2, h3, h4, h5, h6, button, input, select, textarea{font-size:100%;outline:none}address, cite, dfn, em, var{font-style:normal; }code, kbd, pre, samp{font-family:courier new, courier, monospace; }small{font-size:12px; }ul, ol, li{list-style:none; }img{border:none; }a{text-decoration:none;outline:thin none; }a:hover{text-decoration:underline; }table{border-collapse:collapse;border-spacing:0; }.clear{clear:both; }.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0; }html{-webkit-text-size-adjust:none; }body{font:12px/1.5 \5FAE\8F6F\96C5\9ED1, tahoma, arial, \5b8b\4f53, sans-serif; }.grid-960 .wapper{width:100%;min-width:960px;height:auto;margin:0 auto;background:url(../images/bg-body-960.jpg) no-repeat center top; }.grid-1180 .wapper{width:100%;min-width:1180px;height:auto;margin:0 auto;background:url(../images/bg-body-1180.jpg) no-repeat center top; }.grid-1410 .wapper{width:100%;min-width:1410px;height:auto;margin:0 auto;background:url(../images/bg-body-1410.jpg) no-repeat center top; }/*热门活动*/.grid-960 .section{width:960px;margin:0 auto;background-color:#eaf2ff; }.grid-1180 .section{width:1180px;margin:0 auto;background-color:#eaf2ff;}.grid-1410 .section{width:1410px;margin:0 auto;background-color:#eaf2ff;}.title{padding:0 102px;height:70px;line-height:70px;font-size:24px;font-weight:normal;color:#fff;text-shadow:0 3px #df2828, 3px 0 #df2828;background:#cc2223 url(../images/bg-title.jpg) no-repeat left top;}.viewall:hover{text-decoration:none;}.viewall{font-size:18px;;color:#fff;text-shadow:0 3px #df2828, 3px 0 #df2828;float:right;}.grid-1410 .title{padding:0 116px;background-image:url(../images/bg-title-1410.jpg);}.grid-960 .contentwrap{width:800px;margin:0 auto;}.grid-1180 .contentwrap{width:980px;margin:0 auto;}.grid-1410 .contentwrap{width:1180px;margin:0 auto;}.grid-960 .activity{width:826px;height:152px;overflow:hidden;margin:0 auto;position:relative;}.grid-1180 .activity{width:1020px;height:192px;overflow:hidden;margin:0 auto;position:relative;}.grid-1410 .activity{width:1230px;height:232px;overflow:hidden;margin:0 auto;position:relative;}.grid-960 .activity ul{height:152px;overflow:hidden;}.grid-1180 .activity ul{height:192px;overflow:hidden;}.grid-1410 .activity ul{height:232px;overflow:hidden;}.activity li img{display:block;width:100%;height:100%;}.activity li{display:block;float:left;}.grid-960 .activity li{width:250px;height:125px;overflow:hidden;margin:12px;}.grid-1180 .activity li{width:300px;height:150px;overflow:hidden;margin:20px;}.grid-1410 .activity li{width:360px;height:180px;overflow:hidden;margin:25px;}/*js切换*/.pg_left,.pg_right{position:absolute;z-index:999;width:35px;height:50px;overflow:hidden;}.pg_right{background:transparent url(../images/pg_right.png) no-repeat scroll 5px 7px;}.pg_right:hover{background:transparent url(../images/hover.png) no-repeat scroll 0 0;}.grid-960 .pg_right{top:75px;right:16px;margin-top:-25px;}.grid-1180 .pg_right{top:95px;right:20px;margin-top:-25px;}.grid-1410 .pg_right{top:115px;right:25px;margin-top:-25px;}.pg_left{background:transparent url(../images/pg_left.png) no-repeat scroll 5px 7px;}.pg_left:hover{background:transparent url(../images/hover.png) no-repeat scroll right 0;}.grid-960 .pg_left{top:75px;left:13px;margin-top:-25px;}.grid-1180 .pg_left{top:95px;left:20px;margin-top:-25px;}.grid-1410 .pg_left{top:115px;left:25px;margin-top:-25px;}
View Code
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4956293.html有问题欢迎与我讨论，共同进步。