<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery图片分页切换特效 - 网页模板</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var _bulletsCenter = 5; // number of bullets in the middle, should always be an odd number
var _bulletsSide = 2; // number of bullets left and right
for (a = 1; a <= 100; a++) {
var c = ( a % 2 == 0 ) ? 'even' : 'odd';
$('#carousel').append( '<div class="' + c + '">' + a + '</div>' );
}
$('#carousel').carouFredSel({
items: 1,
pagination: '#pager'
});
$('#carousel').bind('updatePageStatus.cfs', function() {
var _bullets = $('#pager').children();
_bullets.removeClass( 'hidden' ).removeClass( 'ellipsis' );
var _pagesTotal = $(this).children().length;
var _pagesCurrent = $(this).triggerHandler( 'currentPosition' );
if (_pagesTotal > _bulletsCenter + (_bulletsSide * 2) + 2) {
// 1 2 3 |4| 5 6 7 8 .. 14 15
if (_pagesCurrent < Math.floor(_bulletsCenter / 2) + _bulletsSide + 2) {
var start = _bulletsSide + _bulletsCenter + 1;
var end = _pagesTotal - _bulletsSide - 1;
hideBullets( _bullets, start, end );
_bullets.eq( end ).addClass( 'ellipsis' );
// 1 2 .. 8 9 10 |11| 12 13 14 15
} else if (_pagesCurrent > _pagesTotal - (Math.ceil(_bulletsCenter / 2) + _bulletsSide) - 2) {
var start = _bulletsSide + 1;
var end = _pagesTotal - (_bulletsSide + _bulletsCenter + 1);
hideBullets( _bullets, start, end );
_bullets.eq( start - 1 ).addClass( 'ellipsis' );
// 1 2 .. 6 7 |8| 9 10 .. 14 15
} else {
var start = _bulletsSide + 1;
var end = _pagesCurrent - Math.floor(_bulletsCenter / 2);
hideBullets( _bullets, start, end );
_bullets.eq( start - 1 ).addClass( 'ellipsis' );
var start = _pagesCurrent + Math.ceil(_bulletsCenter / 2);
var end = _pagesTotal - _bulletsSide - 1;
hideBullets( _bullets, start, end );
_bullets.eq( end ).addClass( 'ellipsis' );
}
}
}).trigger( 'updatePageStatus.cfs' );
});
function hideBullets( bullets, start, end ) {
for ( var a = start; a < end; a++ ) {
bullets.eq( a ).addClass( 'hidden' );
}
}
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
min-height: 500px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
width: 404px;
height: 340px;
margin: -152px 0 0 -210px;
position: absolute;
top: 50%;
left: 50%;
}
#carousel-wrapper {
border: 2px solid #333;
}
#carousel {
width: 400px;
height: 300px;
overflow: hidden;
}
#carousel div {
font-size: 200px;
font-weight: bold;
text-align: center;
line-height: 320px;
width: 400px;
height: 300px;
float: left;
}
#carousel div.odd {
background-color: #eee;
color: #333;
}
#carousel div.even {
background-color: #333;
color: #eee;
}
#pager {
font-family: arial;
font-size: 10px;
text-align: center;
margin-top: 10px;
}
#pager a {
border: 1px solid #999;
color: #999;
text-align: center;
text-decoration: none;
display: inline-block;
width: 30px;
height: 30px;
margin: 0 2px;
overflow: hidden;
}
#pager a span {
line-height: 32px;
}
#pager a:hover {
border-color: #666;
color: #666;
}
#pager a.selected {
border-color: #000;
color: #000;
}
#pager a.hidden {
display: none;
}
#pager a.ellipsis {
border-color: transparent;
}
#pager a.ellipsis:after {
content: '...';
}
#pager a.ellipsis span {
display: none;
}
#donate-spacer {
height: 100%;
}
#donate {
border-top: 1px solid #999;
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form {
margin: 0;
float: left;
}
#donate p {
width: 650px;
}
#donate form {
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel-wrapper">
<div id="carousel"></div>
</div>
<div id="pager"></div>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
