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

基于jquery的带有暂停按钮和时间进度的幻灯睡特效

jQuery插件 fishcity 578浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是一款带有暂停、播放按钮和一个圆形的时间进度条的jquery幻灯片特效。这可以随时暂停动画效果,也可知道离下一张图片展示还有多久时间。

构建html

<div id="wrapper">
	<div id="carousel">
		<img src="img/city1.jpg" width="800" height="500" />
		<img src="img/city2.jpg" width="800" height="500" />
		<img src="img/city3.jpg" width="800" height="500" />
		<img src="img/city4.jpg" width="800" height="500" />
	</div>
	<div id="timer">
		<div class="top">
			<img src="img/timer.png" />
		</div>
		<div class="bottom">
			<img src="img/timer.png" />
		</div>
	</div>
	<a id="play" href="#"></a>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background-color: #9cdbff;
	position: relative;
	min-height: 300px !important;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
body h3 {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 20px;
	text-align: center;
	color: #999;
	margin: 0;
	padding-top: 50px;
	position: relative;
	z-index: 2;
}
#wrapper {
	border: 20px solid rgba( 255, 255, 255, 0.5 );
	box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.3 );
	width: 800px;
	height: 500px;
	margin: -270px 0 0 -420px;
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: hidden;
}
#carousel img {
	float: left;
}
 
#timer,
#play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	opacity: 0.2;
	transition: opacity 0.5s ease;
}
 
#timer {
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
}
#timer .top,
#timer .bottom {
	width: 150px;
	height: 75px;
	overflow: hidden;
}
#timer .bottom img {
	margin-top: -76px;
	transform: rotate(180deg);
}
 
#play {
	border: 20px solid transparent;
	border-left: 30px solid #fff;			
	width: 0;
	height: 0;
	margin: -20px 0 0 -10px;
}
#play.paused {
	border: 10px solid #fff;
	border-top: none;
	border-bottom: none;
	width: 10px;
	height: 36px;
	margin: -18px 0 0 -14px;
}
#wrapper:hover #timer,
#wrapper:hover #play {
	opacity: 0.7;
}

引入核心库文件

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>

写入js调用插件实现效果

$(function() {
	var timer = $('#timer'),
		timerTop = $('.top img', timer),
		timerBottom = $('.bottom img', timer);
 
	$('#carousel').carouFredSel({
		auto: {
			pauseOnEvent: 'resume',
			button: '#play',
			progress: {
				bar: '#timer',
				updater: function( percentage ) {
					if ( percentage < 50 ) {
						var deg = 180 - ( percentage * 180 / 50 );
						timerTop.css( 'transform', 'rotate( -' + deg + 'deg )' );
						timerBottom.css( 'transform', 'rotate( 0deg )' );
						
					} else {
						var deg = ( ( percentage - 50 ) * 180 / 50 );
						timerTop.css( 'transform', 'rotate( 0deg )' );
						timerBottom.css( 'transform', 'rotate( ' + deg + 'deg )' );
					}
				}
			}
		},
		scroll: {
			fx: 'crossfade',
			duration: 300,
			timeoutDuration: 3000,
			onBefore: function() {
				timer.hide();
			},
			onAfter: function() {
				timer.show();
				timerTop.css( 'transform', 'rotate( 182deg )' );
				timerBottom.css( 'transform', 'rotate( 0deg )' );
			}
		}
	});
});

完成以上工作便可实现jquery幻灯片特效。

转载请注明:jQ酷 » 基于jquery的带有暂停按钮和时间进度的幻灯睡特效

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