jQuery图片叠加翻页效果-精品资源网

jQuery图片叠加翻页效果

jQuery图片叠加翻页效果是一款类似一堆叠好的纸，从最上面抽出一张放到最下面的效果一样的图片翻页切换特效。

js代码

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