<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery图片叠加翻页效果</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" media="all" href="css/demo.css" />
<style>
body {
font-family:'Open Sans', Arial, Helvetica, sans-serif
}
h1, h2 {
font-weight:300;
}
#wrapper {
padding:20px 0;
margin:0 auto;
width:800px;
}
.papers-demo {
position:relative;
width:360px;
height:480px;
margin-left:auto;
margin-right:auto;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
/* paper slider css*/
.paper-slide {
background:#333;
color:#fff;
box-shadow:0 0 15px rgba(0,0,0,.3);
}
.paper-slide.ps-odd {
background:#000;
}
.ps-nav {
display:block;
width:2em;
height:2em;
border:1px solid #aaa;
background:#ddd;
line-height:2em;
text-align:center;
position:absolute;
top:50%;
margin-top:-1em;
border-radius:2em;
}
.ps-nav-prev {
left:-2.5em;
}
.ps-nav-next {
right:-2.5em;
}
.ps-nav:hover {
color:#eee;
background:#08c;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="htmleaf-container">
<div id="wrapper">
<p class="aligncenter">
<span class="iblock">实验：</span>
<a href="javascript:;" class="btn btn-d btn-inline btn-share btn-share-facebook with-icon-alert" id="o-btn-des">destroy slider</a>
<a href="javascript:;" class="btn btn-b btn-inline btn-share btn-share-facebook with-icon-plus" id="o-btn-ns">add a new slider</a>
</p>
<p class="pb mg">
</p>
<!-- paper slider units wrapper-->
<div class="mgtb papers-demo hide" id="papers1">
<!-- one paper slider unit -->
<div>
<h1 class="aligncenter">Paper Slider Demo</h1>
<p class="aligncenter">a "paper effect" slider jQuery plugin .</p>
</div>
<!-- /one paper slider unit -->
<!-- one paper slider unit -->
<div>
<h2 class="aligncenter">Paper Slider </h2>
<ul class="list">
<li><a class="li-head ps-link" href="javascript:;" data-ps-page="0">back to page 1</a></li>
<li><a class="li-head ps-link" href="javascript:;" data-ps-page="1">current page</a></li>
<li><a class="li-head ps-link" href="javascript:;" data-ps-page="2">page 3</a></li>
<li><a class="li-head ps-link" href="javascript:;" data-ps-page="3">page 4</a></li>
<li><a class="li-head ps-link" href="javascript:;" data-ps-page="4">page 5</a></li>
</ul>
</div>
<!-- /one paper slider unit -->
<!-- one paper slider unit -->
<div>
<h2 class="aligncenter">page 3</h2>
<p class="aligncenter">
<a class="btn btn-b btn-inline ps-link" href="javascript:;" data-ps-page="0">back to page 1</a>
<a class="btn btn-c btn-inline ps-link" href="javascript:;" data-ps-page="1">back to page 2</a>
</p>
</div>
<!-- /one paper slider unit -->
<!-- one paper slider unit -->
<div>
<h2 class="aligncenter">page 4</h2>
<p class="aligncenter">
<a class="btn btn-b btn-inline ps-link" href="javascript:;" data-ps-page="0">back to page 1</a>
<a class="btn btn-c btn-inline ps-link" href="javascript:;" data-ps-page="1">back to page 2</a>
</p>
</div>
<!-- /one paper slider unit -->
<!-- one paper slider unit -->
<div>
<h2 class="aligncenter">page 5</h2>
<p class="aligncenter">
<a class="btn btn-b btn-inline ps-link" href="javascript:;" data-ps-page="0">back to page 1</a>
<a class="btn btn-c btn-inline ps-link" href="javascript:;" data-ps-page="1">back to page 2</a>
</p>
</div>
<!-- /one paper slider unit -->
</div>
<!-- /paper slider units wrapper -->
</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.paper-slider.js"></script>
<script>
//scripts
$(document).ready(function() {
//init slider 1
var defaults = {
speed: 500
,timer: 4000
,autoSlider: true
,hasNav: true
,pauseOnHover: true
,navLeftTxt: '<'
,navRightTxt: '>'
,zIndex:20
,ease: 'linear'
,beforeAction: function() {
//this refers to DS instance
this.t.css({
background: '#08c'
})
}
,afterAction: function() {
this.t.css({
background: '#eee'
})
//this refers to DS instance
}
}
,as = $('#papers1').paperSlider(defaults)
,count = 2
//destroy
$('#o-btn-des').click(function() {
as.destroy()
})
//resize wrapper
$('#o-btn-cs').click(function() {
$('#papers1').css('width', 600)
})
//resize wrapper
$('#o-btn-ns').click(function() {
var t = '<div class="papers-demo mgtb" id="papers' + ++count +'">' +
($('#papers1 .paper-slides').length?$('#papers1 .paper-slides').html():$('#papers1').html()) +
'</div>'
$('#wrapper').append(t)
$('#papers' + count).paperSlider(defaults)
})
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
jQuery图片叠加翻页效果.zip （10个子文件） 
js 
jquery.paper-slider.js 4KB jquery-2.1.1.min.js 82KB jquery.paper-slider.min.js 3KB css demo.css 23KB default.css 5KB
index.html 5KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB资源评论
