左右切换


<div class="wapper">
  
 <div class="section">
  <h2 class="title">热门活动</h2>
  <div class="activity" class="movie" id="activity-slide">
   <a href="javascript:void(0)" class="pg_left ps_pre hide">pre</a>
   <a href="javascript:void(0)" class="pg_right ps_next" >next</a>
   <ul class="clearfix">
    <li><a href="javascript:;">1</a></li>
    <li><a href="javascript:;">2</a></li>
    <li><a href="javascript:;">3</a></li>
    <li><a href="javascript:;">4</a></li>
    <li><a href="javascript:;">5</a></li>
   </ul>
  </div>
 </div>
 
</div>

(function($){
$.photolist=function(a){
var w_li = a.find("li").width();
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();

//判断每次滚动数量
num=1;
addlist();
//点击滚动事件
photoscroll();
function addlist(){
a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});
}
function photoscroll(){
a.find(".ps_pre").on("click",function(){
if(now > 0){
now--;
if(now >= 0){
a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
}
}
});
a.find(".ps_next").on("click",function(){
if (now < (lisize+addli)/num - 3){
console.log((lisize+addli)/num - 1);
now++;
if(now < (lisize+addli)/num){
a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
$('.ps_pre').show();
}
}
});
}
}
})(jQuery);
$.photolist($("#activity-slide"));
原文地址:https://www.cnblogs.com/opcec/p/8275729.html