分享一个滚动的js代码

发布于2017-02-21  2,348次阅读


因为工作中中常常用到!所以就写了个!
var index = {
init : function(){
var othis = this;
this.show = 5;//显示的个数
this.one_li_w = $(".rolling ul li").outerWidth();//获取单个li的宽度
var li_total = $(".rolling ul li").length;//获取总的li个数
$(".rolling ul").width(this.one_li_w * li_total);//给ul添加宽度
jQuery('.next').bind('click',function(){
othis.bind_netx_click();//绑定点击事件
});
jQuery('.prev').bind('click',function(){
othis.bind_pre_click();//绑定点击事件
});
},
bind_netx_click : function(this_obj){
var show = this.show;
var one_li_w = this.one_li_w;
var _this_ul = $(".bd").children("ul");//当前ul
var _leg = _this_ul.children("li").length;//li的总数
var oldLeft = _this_ul.position().left;//偏移的宽度
if(_leg > show){//判断如果总数大于显示的个数
if( _leg-show > Math.abs(oldLeft/one_li_w) ){//如果总数减去已经显示的个数等于未显示的个数大于偏移的宽度除于单个的宽度,判断是否到底
if( _this_ul.is(":animated") ){ return false };//是否正在滚动
var left_li = _leg - show - Math.abs(oldLeft/one_li_w);//计算还有多少个li
if(left_li >= show ){// 如果大于5
_this_ul.animate({ left:-((one_li_w*show) + Math.abs(oldLeft)) });//偏移5个
}else{
_this_ul.animate({ left:-((one_li_w* left_li) + Math.abs(oldLeft)) });//偏移剩余的所有
}
}else if( _leg-show == Math.abs(oldLeft/one_li_w) ){
alert('已经是到底了!');
}
}else{
alert('已经是到底了!');
}
},
bind_pre_click : function(){
var show = this.show;
var one_li_w = this.one_li_w;
var _this_ul = $(".bd").children("ul");//当前ul
var _leg = _this_ul.children("li").length;//li的总数
var oldLeft = Math.abs(_this_ul.position().left);//偏移的宽度

if( Math.abs(oldLeft/one_li_w) > 0 ){//如果偏移大于0
if( _this_ul.is(":animated") ){ return false };//是否正在滚动
var left_li = oldLeft/one_li_w;//偏移的个数
if(left_li >= show){//判断偏移的个数是否大于显示个数
_this_ul.animate({ left: -(oldLeft-(one_li_w * show)) });//偏移5个
}else{
_this_ul.animate({ left: -(oldLeft-(one_li_w * left_li)) });//偏移剩余的所有
}
}else if( Math.abs(oldLeft/one_li_w) == 0 ){
alert('已经是到顶了');
}
},
}

jQuery(document).ready(function(){
index.init();
});

完整的demo代码已经上传至百度网盘https://pan.baidu.com/s/1hsql28c   提取密码:576p


  • 微信或支付宝

道,可道,非常道;名,可名,非常名。