注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于jquery的响应式无限循环的全屏焦点图特效

jQuery插件 fishcity 868浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。这款主题响应式无限循环的全屏焦点图特效,本实例一共只能展现三张图片,当前图片全部展示,并展示标题与简单的介绍,其它两张显示部分。现在我们看下如何使用。

构建html

<div id="wrapper">
	<div id="slider">
	
		<div class="slide" style="background-image: url(img/iceage.jpg);">
			<div class="slide-block">
				<h4>Ice Age</h4>
				<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
			</div>
		</div>
 
		<div class="slide" style="background-image: url(img/birds.jpg);">
			<div class="slide-block">
				<h4>For The Birds</h4>
				<p>For the Birds is an animated short film, produced by Pixar Animation Studios released in 2000. It is shown in a theatrical release of the 2001 Pixar feature film Monsters, Inc.</p>
			</div>
		</div>
 
		<div class="slide" style="background-image: url(img/up.jpg);">
			<div class="slide-block">
				<h4>UP</h4>
				<p>A comedy adventure in which 78-year-old Carl Fredricksen fulfills his dream of a great adventure when he ties thousands of balloons to his house and flies away to the wilds of South America.</p>
			</div>
		</div>
 
	</div>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background: #f9f9f3;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #222;
	line-height: 20px;
}
 
#wrapper {
	height: 100%;
	width: 100%;
	min-height: 650px;
	min-width: 900px;
	padding-top: 1px;
}
#slider {
	margin: 100px 0 0 0;
	height: 500px;
	overflow: hidden;
	background: url(img/ajax-loader.gif) center center no-repeat;
}
 
#slider .slide {
	position: relative;
	display: none;
	height: 500px;
	float: left;
	background-position: center right;
	cursor: pointer;
	border-left: 1px solid #fff;
}
 
#slider .slide:first-child {
	border: none;
}
 
#slider .slide.active {
	cursor: default;
}
 
#slider .slide-block {
	position: absolute;
	left: 40px;
	bottom: 75px;
	display: inline-block;
	width: 435px;
	background-color: #fff;
	background-color: rgba(255,255,255, 0.8);	
	padding: 20px;
	font-size: 14px;
	color: #134B94;
	border: 1px solid #fff;
	overflow: hidden;
	border-radius: 4px;
}
 
#slider .slide-block h4 {
	font-size: 36px;
	font-weight: bold;
	margin: 0 0 10px 0;
	line-height: 1;
}
#slider .slide-block p {
	margin: 0;
}

写入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] );
	});
 
});

完成以上工作,便可实现漂亮动感的响应式无限循环全屏信息图特效。

转载请注明:jQ酷 » 基于jquery的响应式无限循环的全屏焦点图特效

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。