素材网 素材网

jquery制作宽屏图片重叠左右切换特效带有内容简介板块

下载资源()次

阅读次数()次

发布时间:2014-03-26

jquery制作宽屏图片重叠左右切换特效带有内容简介板块
分享到:

用法简介:

来源:xw素材网

jquery制作宽屏图片重叠左右切换特效带有内容简介板块。
文件引用:

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.2.0-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').carouFredSel({
width: '100%',
align: false,
items: 3,
items: {
	width: $('#wrapper').width() * 0.15,
	height: 500,
	visible: 1,
	minimum: 1
},
scroll: {
	items: 1,
	timeoutDuration : 5000,
	onBefore: function(data) {
		//	find current and next slide
		var currentSlide = $('.slide.active', this),
			nextSlide = data.items.visible,
			_width = $('#wrapper').width();
		//	resize currentslide to small version
		currentSlide.stop().animate({
			width: _width * 0.15
		});		
		currentSlide.removeClass( 'active' );
		//	hide current block
		data.items.old.add( data.items.visible ).find( '.slide-block' ).stop().fadeOut();					
		//	animate clicked slide to large size
		nextSlide.addClass( 'active' );
		nextSlide.stop().animate({
			width: _width * 0.7
		});						
	},
	onAfter: function(data) {
		//	show active slide block
		data.items.visible.last().find( '.slide-block' ).stop().fadeIn();
	}
},
onCreate: function(data){
	//	clone images for better sliding and insert them dynamacly in slider
	var newitems = $('.slide',this).clone( true ),
		_width = $('#wrapper').width();
	$(this).trigger( 'insertItem', [newitems, newitems.length, false] );
	//	show images 
	$('.slide', this).fadeIn();
	$('.slide:first-child', this).addClass( 'active' );
	$('.slide', this).width( _width * 0.15 );
	//	enlarge first slide
	$('.slide:first-child', this).animate({
		width: _width * 0.7
	});
	//	show first title block and hide the rest
	$(this).find( '.slide-block' ).hide();
	$(this).find( '.slide.active .slide-block' ).stop().fadeIn();
}
});
//	Handle click events
$('#slider').children().click(function() {
$('#slider').trigger( 'slideTo', [this] );
});
//	Enable code below if you want to support browser resizing
$(window).resize(function(){
var slider = $('#slider'),
	_width = $('#wrapper').width();
//	show images
slider.find( '.slide' ).width( _width * 0.15 );
//	enlarge first slide
slider.find( '.slide.active' ).width( _width * 0.7 );
//	update item width config
slider.trigger( 'configuration', ['items.width', _width * 0.15] );
});
});
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。