mgtv - 素材

当前位置:Gxlcms > 进度条 > jQuery定时计时器幻灯片

jQuery定时计时器幻灯片

时间:2021-07-01 10:21:17 帮助过:0人阅读

jQuery定时计时器幻灯片 jQuery定时计时器幻灯片是一款带有进度条的图片定时切换幻灯片代码下载。本作品由【站长素材】收集整理,转载请注明出处!
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
		<title>jQuery定时计时器幻灯片 - mgtv素材</title>
		<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
		<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
		<script type="text/javascript">
			function prevTimers() {
				return allTimers().slice( 0, $('#pager a.selected').index() );
			}
			function allTimers() {
				return $('#pager a span');
			}

			$(function() {
				$('#carousel').carouFredSel({
					items: 1,
					auto: {
						pauseOnHover: 'resume',
						progress: {
							bar: '#pager a:first span'
						}
					},
					scroll: {
						fx: 'crossfade',
						duration: 300,
						timeoutDuration: 2000,
						onAfter: function() {
							allTimers().stop().width( 0 );
							prevTimers().width( 140 );
							$(this).trigger('configuration', [ 'auto.progress.bar', '#pager a.selected span' ]);
						}
					},
					pagination: {
						container: '#pager',
						anchorBuilder: false
					}
				});
			});
		</script>
		<style type="text/css">
			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				min-height: 450px;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}

			#wrapper {
				width: 576px;
				height: 335px;
				margin: -168px 0 0 -287px;
				position: absolute;
				left: 50%;
				top: 50%;
			}
			#carousel {
				width: 576px;
				height: 335px;
			}
			#carousel img {
				border: 1px solid #ccc;
				display: block;
				padding: 10px;
				float: left;
			}
			#pager {
				margin-top: 5px;
				width: 600px;
			}
			#pager a, #pager span {
				display: block;
				height: 10px;
			}
			#pager a {
				border: 1px solid #ccc;
				width: 140px;
				margin-right: 3px;
				float: left;
			}
			#pager a:hover {
				border-color: #999;
			}
			#pager span {
				background-color: #ccc;
				width: 0px;
			}
			
			#donate-spacer {
				height: 100%;
			}
			#donate {
				border-top: 1px solid #999;
				width: 750px;
				padding: 50px 75px;
				margin: 0 auto;
				overflow: hidden;
			}
			#donate p, #donate form {
				margin: 0;
				float: left;
			}
			#donate p {
				width: 650px;
			}
			#donate form {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="carousel">
				<img src="img/cars.jpg" alt="cars" width="554" height="313" />
				<img src="img/rat.jpg" alt="rat" width="554" height="313" />
				<img src="img/toystory.jpg" alt="toystory" width="554" height="313" />
				<img src="img/walle.jpg" alt="walle" width="554" height="313" class="last" />
			</div>
			<div id="pager">
				<a href="#"><span></span></a>
				<a href="#"><span></span></a>
				<a href="#"><span></span></a>
				<a href="#"><span></span></a>
			</div>
		</div>
<div style="text-align:center;clear:both">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源:<a href="https://www.mgtv.xyz" target="_blank">mgtv素材</a></p>
</div>
	</body>