jQuery带进度条带标题左右箭头渐变幻灯片代码

百折不屈 2019-11-19 119 阅读

特效描述:利用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 &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.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 &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.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 &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>

演示地址下载地址

最新游戏