<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery翻页</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
#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>
<script language="javascript">
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>
<div id="state"></div>
<div id="box">
<span class="prev"><-</span>
<ul>
<li><a href="#"><img src="img/BURBERRY-952.JPG" /></a>$61</li>
<li><a href="#"><img src="img/BURBERRY-953.JPG" /></a>$62</li>
<li><a href="#"><img src="img/BURBERRY-954.JPG" /></a>$63</li>
<li><a href="#"><img src="img/BURBERRY-955.JPG" /></a>$64</li>
<li><a href="#"><img src="img/BURBERRY-956.JPG" /></a>$65</li>
<li><a href="#"><img src="img/BURBERRY-957.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-958.JPG" /></a>$67</li>
<li><a href="#"><img src="img/BURBERRY-959.JPG" /></a>$68</li>
<li><a href="#"><img src="img/BURBERRY-960.JPG" /></a>$69</li>
<li><a href="#"><img src="img/BURBERRY-961.JPG" /></a>$70</li>
<li><a href="#"><img src="img/BURBERRY-962.JPG" /></a>$71</li>
<li><a href="#"><img src="img/BURBERRY-963.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-964.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-965.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-966.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-967.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-968.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-969.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-970.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-971.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-972.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-973.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-974.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-975.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-976.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-977.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-978.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-979.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-980.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-981.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-982.JPG" /></a>$66</li>
<li><a href="#"><img src="img/BURBERRY-983.JPG" /></a>$66</li>
</ul>
<span class="next">-></span>
</div>
</body>
</html>
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
