特效描述：利用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/pview.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/pview.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/pview.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/pview.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="pview1" 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 & 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.cxvn.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 & 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 & 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 & 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.cxvn.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 & 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>3×2 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>
下载地址
1.《jQuery带进度条带标题左右箭头渐变幻灯片代码》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《jQuery带进度条带标题左右箭头渐变幻灯片代码》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/code/focus/364.html