利用jQuery实现带进度条带标题左右箭头渐变幻灯片



21 80 27



特效描述:利用jQuery实现 带进度条 带标题 左右箭头 渐变幻灯片,利用jQuery实现带进度条带标题左右箭头渐变幻灯片

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:bold|Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/preview.css" />
<link rel="stylesheet" href="css/skin.min.css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:bold|Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/preview.css" />
<link rel="stylesheet" href="css/skin.min.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
<script type="text/javascript" src="js/jquery.pixelentity.kenburnsSlider.min.js"></script>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
<script type="text/javascript" src="js/jquery.pixelentity.kenburnsSlider.min.js"></script>

3. HTML代码

<!DOCTYPE HTML>
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
	<!-- Meta information -->
	<meta charset="utf-8">
	<title></title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="robots" content="index, follow" /> 
	<meta name="SKYPE_TOOLBAR" content ="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
	<!-- favicon & idevice homepage thumb -->
	<link rel="shortcut icon" href="favicon.jpg">
	<!-- google font -->
	<!-- main stylesheets -->
	<!-- import jQuery -->
	<!--specify size of slider-->
	<style>		
		.peKenBurns {
       		width: 920px;
       		height: 400px;
		}
	</style>
	<script>
		jQuery(function($){
			$(".peKenBurns").peKenburnsSlider({externalFont:true})
		})
		// for google fonts, handle captions sizing only after fonts are loaded
		jQuery(window).load(function() {
			$(".peKenBurns").each(function() {
				$(this).data("peKenburnsSlider").fontsLoaded()
			})
		})
	</script>
    </head>
    <body id="preview1" class="clearfix">
       <div id="annotation">
		<div id="wrapper" class="container_16"> 
			<h1 class="title">Estro Slider by Pixelentity</h1>
			<!--start peKenBurns slider-->
			<div class="peKenBurns peNoJs" data-autopause="image" data-thumb="enabled" data-mode="kb" data-controls="always" data-shadow="enabled" data-logo="enabled">
			   <div class="peKb_active" data-delay="5" data-thumb="img/thumbs/kb_01.jpg">
			   <img src="img/kb_01.jpg" alt="Banner Image 1" />
			   <h1>HI &amp; WELCOME TO THE "ESTRO" SLIDER BY PIXELENTITY</h1>
			   </div>
			   <!-- lazy loading active -->
			   <div data-delay="5" data-thumb="img/thumbs/kb_00.jpg">
			   <a class="video hd autoplay loop skiptonext" href="http://www.51qianduan.com/"><img src="img/blank.png" data-src="img/kb_00.jpg" alt="Banner Image 1" /></a>
			   <h1>A KICK-ASS JQUERY PLUGIN WITH KEN BURNS &amp; 2-WAY SWIPE TRANSITIONS</h1>
			   </div>
			   <!-- lazy loading active -->
			   <div data-delay="5" data-thumb="img/thumbs/kb_02.jpg">
			   <img src="img/blank.png" data-src="img/kb_02.jpg" alt="Banner Image 1" />
			   <h1>FINE TUNED, SLEEK &amp; SMOOTH, THIS SLIDER WILL IMPRESS YOUR VISITORS</h1>
			   </div>
			   <!-- lazy loading active -->
			   <div data-delay="5" data-thumb="img/thumbs/kb_03.jpg">
			   <img src="img/blank.png" data-src="img/kb_03.jpg" alt="Banner Image 1" />
			   <h1>SUPPORTS ANIMATED CAPTIONS, YOUTUBE &amp; VIMEO VIDEO, SINGLE PAGE MULTI-USE</h1>
			   </div>
			   <!-- lazy loading active -->
			   <div data-delay="5" data-thumb="img/thumbs/kb_04.jpg">
			   <a class="video hd autoplay loop skiptonext" href="http://www.51qianduan.com/"><img src="img/blank.png" data-src="img/kb_04.jpg" alt="Banner Image 1" /></a>
			   <h1>CHOOSE FROM MULTIPLE SKINS TO SUIT YOUR OWN STYLE</h1>
			   </div>
			   <!-- lazy loading active -->
			   <div data-delay="5" data-thumb="img/thumbs/kb_05.jpg">
			   <img src="img/blank.png" data-src="img/kb_05.jpg" alt="Banner Image 1" />
			   <h1>BONUS MINIMAL THUMBNAIL MODE WITH KEN BURNS ROLLOVER EFFECT </h1>
			   </div>
			   <!-- lazy loading active -->
			   <div data-delay="5" data-thumb="img/thumbs/kb_06.jpg">
			   <img src="img/blank.png" data-src="img/kb_06.jpg" alt="Banner Image 1" />
			   <h1>GORGEOUS ANIMATED TIMER INTEGRATED INTO THE CURRENT SLIDE BUTTON</h1>
			   </div>
			</div>	
			<!--end peKenBurns slider -->
			<!--menu-->
			<div id="menuWrapper">
				<h2>SELECT A DEMO:</h2>
				<ul id="menu">
					<li class="first selected">
						<span class="current"></span>
							<a href="#">1</a>
						   <ul>
							   <li class="subtitle">PIXELENTITY SKIN</li>
							   <li>Full Width</li>
							   <li>Ken Burns Effect</li>
							   <li>Thumbnail Popup</li>
							   <li>Image Over Pause</li>
							   <li>Animated Timer</li>
							   <li>Always-on Controls</li>
							   <li>Animated Captions</li>
						   </ul>
					</li>
					<li class="second">
						<a href="neutral_light.html">1</a>
							<ul>
								<li class="subtitle">LIGHT SKIN</li>
								<li>704x396px (16:9)</li>
								<li>Ken Burns Effect</li>
								<li>Thumbnail Popup</li>
								<li>Image Over Pause</li>
								<li>Animated Timer</li>
								<li>Always-on Controls</li>
								<li>Animated Captions</li>
							</ul>
					</li>
					<li class="fifth">
						<a href="neutral.html">1</a>
						   <ul>
							   <li class="subtitle">DARK SKIN</li>
							   <li class="new">Inner Controls (new)</li>
							   <li>Full Width</li>
							   <li>Swipe Transition</li>
							   <li>Thumbnail Popup</li>
							   <li>Image Over Pause</li>
							   <li>Animated Timer</li>
							   <li>Animated Captions</li>
						   </ul>
					</li>
					<li class="third">
						<a href="dual.html">2</a>
						   <ul>
							   <li class="subtitle">ORGANIC SKIN</li>
							   <li>Double Slider</li>
							   <li>Ken Burns &amp; Swipe</li>
							   <li>Image Over Pause</li>
							   <li>Animated Timer</li>
							   <li>Auto-hide Controls</li>
							   <li>Animated Captions</li>
						   </ul>
					</li>
					<li class="fourth">
						<a href="grid.html">3</a>
						   <ul>
							   <li class="subtitle">MINIMAL</li>
							   <li>3x2 Grid</li>
							   <li>Ken Burns Rollover</li>
							   <li>1 Looped Image</li>
							   <li>Controls Disabled</li>
							   <li>Rollover Captions</li>
							   <li>Lightbox Integration</li>
						   </ul>
					</li>
				</ul>
				<!--end menu-->
			  </div>
			  <!--end menu wrapper-->
		 </div>
		 <!--end wrapper-->
		</div>
		<!--end annotation-->
    </body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash焦点图 flash幻灯片 flashbanner flash图片轮播 渐隐切换 淡出淡进 淡出 淡进 切换按钮 表单 表单美化 表单插件 表单美化插件 焦点图 幻灯片 轮播图 bar焦点图 图片淡出淡进 图片淡出 图片淡进 带缩略图的幻灯片 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到