学习笔记

在原代码基础上,根据我的需求是,左右两个按钮一直显示,所以去把btnshow()方法的注释,运行出现bug,所以我给左右按钮做了if判断,if(now>0) and if(noe<(lisize+addli)/num - 1)来限制,效果不错。

html结构:
<div class="tab-friend" id="activity-slide">
<span class="wid-left ps_pre"><img src="images/20170322/left_img_btns_2.png" alt=""></span>
<div class="width-1130px">
<div class="box-list">
<div class="tab-list ">
<ul>
<li class="span-div"><a href="#3"><span class="img_fri_bg0"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg1"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg2"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg3"></span></a></li>
<li class="span-div lsat-sd"><a href="#3"><span class="img_fri_bg4"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg5"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg6"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg7"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg8"></span></a></li>
<li class="span-div lsat-sd"><a href="#3"><span class="img_fri_bg9"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg10"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg11"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg12"></span></a></li>
<li class="span-div"><a href="#3"><span class="img_fri_bg13"></span></a></li>
</ul>
</div>
</div>
</div>
<span class="wid-right ps_next"><img src="images/20170322/right_img_btns_1.png" alt=""></span>
</div>


js:修改后的代码
//首页图片滚动切换
(function($){
$.photolist=function(a){
var w_li = a.find("li").width();
var h_li = a.find("li").height();
var margin_li=parseInt(a.find("li").css("marginLeft"));
var now = 0;
var num = 0;
var addli = 0;
var lisize = a.find("ul li").size();
var htmlall = 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;
}
*/
var num=5;

//判断需要添加的li节点数量
var reminder=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;
}
*/
var num=5;
//判断需要添加的li节点数量
var reminder=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);
});


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)});
//console.log(a.find("ul li").size());
}
function photoscroll(){
a.find(".ps_pre").on("click",function(){//console.log(num);
if(now > 0){
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);
if (now < (lisize+addli)/num - 1){
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个数
***/
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();

}
}

}
})(jQuery);
$.photolist($("#activity-slide"));




源代码(感谢原作者)
//首页图片滚动切换
(function($){
$.photolist=function(a){
var w_li = a.find("li").width();
var h_li = a.find("li").height();
var margin_li=parseInt(a.find("li").css("marginLeft"));
var now = 0;
var num = 0;
var addli = 0;
var lisize = a.find("ul li").size();
var htmlall = 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;
}
*/
var num=5;

//判断需要添加的li节点数量
var reminder=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;
}
*/
var num=5;
//判断需要添加的li节点数量
var reminder=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);
});


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)});
//console.log(a.find("ul li").size());
}
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);
}
/***
参数说明:
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();

}
}

}
})(jQuery);
$.photolist($("#activity-slide"));








原文地址:https://www.cnblogs.com/opcec/p/6609733.html