jQuery图片叠加翻页切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片叠加翻页切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>

<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">
	  &nbsp;
	  </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: '&lt;'
		,navRightTxt: '&gt;'
		,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>
</body>
</html>

JS代码(jquery.paper-slider.min.js):

/* ------------------------------------------------------------------------ plugin-name:jQuery Paper Slider Developped By:ZHAO Xudong,zxdong@gmail.com -> http://html5beta.com/jquery-2/jquery-paper-slider/ Version:1.0.6 License:MIT------------------------------------------------------------------------ */
(function(e){
	function t(t,n){
	var r={
	speed:500,timer:4e3,autoSlider:!0,hasNav:!0,pauseOnHover:!0,navLeftTxt:"&lt;
	",navRightTxt:"&gt;
	",zIndex:20,ease:"linear"}
,i=this,s=i.defs=e.extend(r,t),o={
	position:"absolute",left:0,right:0,width:"100%",height:"100%","z-index":s.zIndex}
;
	i.t=n.show().wrapInner('<div class="paper-slides" />'),i.p=i.t.children().css(o),i.ps=i.p.children().addClass("paper-slide").css(o),i.len=i.ps.length,i.flag=null,i.pause=!1,i.onAction=!1,i.currentPage=0,i.ps.eq(0).css("z-index",s.zIndex+1).end().filter(":odd").addClass("ps-odd"),i.defs.autoSlider&&(i.flag=setTimeout(function(){
	i.autoroll()}
,s.timer)),i.t.hover(function(){
	e(this).addClass("ps-hover"),s.pauseOnHover&&(i.pause=!0)}
,function(){
	e(this).removeClass("ps-hover"),s.pauseOnHover&&(i.pause=!1)}
),i.t.on("click",".ps-link",function(){
	if(i.onAction)return;
	i.onAction=!0;
	var t=parseInt(e(this).data("ps-page")),n=(t+i.len)%i.len,r=t>i.currentPage;
	if(n===i.currentPage)return;
	i.action(r,n)}
),s.hasNav&&(i.t.append('<a href="javascript:;
	" class="ps-nav ps-nav-prev">'+s.navLeftTxt+'</a><a href="javascript:;
	" class="ps-nav ps-nav-next">'+s.navRightTxt+"</a>").children(".ps-nav").css("z-index",s.zIndex+10+i.len),i.t.on("click",".ps-nav",function(){
	if(i.onAction)return;
	i.onAction=!0;
	var t=e(this).hasClass("ps-nav-next"),n=i.len,r=t?(i.currentPage+1+n)%n:(i.currentPage-1+n)%n;
	i.action(t,r)}
))}
t.prototype={
	action:function(t,n){
	var r=this,i=r.defs,s=i.speed,o=r.currentPage,u=r.ps,a=t?50:-50,f=u.eq(o),l=u.eq(n);
	f.css({
	"z-index":i.zIndex+2}
).addClass("ps-on").show(),l.css({
	"z-index":i.zIndex+1}
).addClass("ps-on").show(),u.filter(function(){
	return!e(this).hasClass("ps-on")}
).css("z-index",i.zIndex),f.animate({
	left:-a+"%"}
,s,i.ease,function(){
	f.css("z-index",i.zIndex+1).animate({
	left:0}
,s)}
),l.animate({
	left:a}
,s,i.ease,function(){
	f.removeClass("ps-on"),l.css("z-index",i.zIndex+2).removeClass("ps-on").animate({
	left:0}
,s),r.currentPage=n,r.onAction=!1,i.autoSlider&&(clearTimeout(r.flag),r.flag=setTimeout(function(){
	r.autoroll()}
,i.timer))}
)}
,autoroll:function(){
	var e=this;
	if(!e.onAction&&!e.pause){
	e.onAction=!0;
	var t=(e.currentPage+1+e.len)%e.len;
	e.pause||e.action(!0,t)}
else clearTimeout(e.flag),e.flag=setTimeout(function(){
	e.autoroll()}
,e.defs.timer)}
,destroy:function(){
	var t=this;
	clearTimeout(t.flag),t.ps.unwrap(),t.t.off("click","**").removeAttr("style").children(".ps-nav").remove(),t.t.children(".paper-slide").removeAttr("style").removeClass("paper-slide"),e.each(t,function(e,n){
	t[e]=null}
)}
}
,e.fn.paperSlider=function(e){
	return new t(e,this)}
}
)(jQuery);

CSS代码(default.css):

body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.htmleaf-content{font-size:150%;padding:1em 0;}
.htmleaf-content h2{margin:0 0 2em;opacity:0.1;}
.htmleaf-content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.htmleaf-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#333;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}

附件:下载该文件资源,减少时间成本(增值服务)