• 微信号:Zh-y9213
您当前的位置:爱资源分享网 > > 网站源码 > 网页特效

jQuery图片叠加翻页效果

栏目:网页特效时间:2021-07-08 03:11阅读数:23人阅读
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>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:737597453@qq.com