jquery翻页效果

最新推荐文章于 2024-06-13 21:16:17 发布

KarlLuo

最新推荐文章于 2024-06-13 21:16:17 发布

阅读量3.7k

点赞数

分类专栏： IT技术文章标签： jquery function xhtml class html

本文链接：https://blog.csdn.net/lk188/article/details/4998993

版权

IT技术专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery翻页</title>

#box{

}

#box ul{

padding:0;

margin:0;

display:inline;

}

#box ul li{

list-style:none;

display:inline-block;

}

#box ul li{

_display:inline;

}

#box ul li a{

display:block;

}

#box ul li a img{

height:70px;

width:70px;

}

</style>

jQuery.fn.extend({

imgbox:function(setting){

if(!this.data('quantity')){

this.data('quantity',setting.quantity?setting.quantity:10);

var _this = this;

if(setting.state)this.data('state',setting.state);

if(setting.prev)setting.prev.click(function(){_this.imgbox('prev');});

if(setting.next)setting.next.click(function(){_this.imgbox('next');});

}

var current = this.data('start') ? this.data('start') : 0;

var quantity = this.data('quantity');

var page_total = Math.ceil(this.length/quantity);

var page_current = Math.ceil(parseInt(current+1)/quantity);

if(setting == 'prev'){

page_current = page_current-1 < 1 ? page_total : page_current-1;

} else if(setting == 'next') {

page_current = page_current+1 > page_total ? 1 : page_current+1;

}

var start = parseInt(page_current - 1) * quantity;

this.data('start',start);

this.hide().slice(start,start + quantity).show();

if(this.data('state'))this.data('state').html(page_current+'/'+page_total);

}

});

$(function(){

$("#box > ul > li").imgbox({

quantity:5,

state:$('#state'),

prev:$('.prev'),

next:$('.next')

});

</script>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

KarlLuo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
jquery翻页效果

jquery翻页#box{}#box ul{padding:0;margin:0;display:inline;}#box ul li{list-style:none;display:inline-block;}#box ul li{_display:inline;}#box ul li a{display:block;
复制链接

扫一扫

专栏目录