运行效果如下:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为swipe放大效果的焦点图代码,属于站长常用代码。" />
<title>swipe放大效果的焦点图代码</title>
<link rel="stylesheet" href="css/lrtk.css" />
<link rel="stylesheet" href="js/pe.kenburns/themes/default/skin.min.css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/pe.kenburns/jquery.pixelentity.kenburnsslider.min.js"></script>
<script>
jQuery(function($){
$(".peKenBurns").peKenburnsSlider({externalFont:true})
})
</script>
</head>
<body><br /><br />
<!-- 代码 开始 -->
<div id="annotation">
<div id="wrapper" class="container_16">
<!--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_00.jpg">
<a href="#" target="_blank"><img src="img/kb_00.jpg" /></a>
<h1>HI & WELCOME TO THE "ESTRO" SLIDER BY PIXELENTITY</h1>
</div>
<div data-delay="5" data-thumb="img/thumbs/kb_01.jpg">
<a href="#" target="_blank"><img src="img/blank.png" data-src="img/kb_01.jpg" /></a>
<h1>A KICK-ASS JQUERY PLUGIN WITH KEN BURNS & 2-WAY SWIPE TRANSITIONS</h1>
</div>
<div class="peKb_active" data-delay="5" data-thumb="img/thumbs/kb_02.jpg">
<a href="#" target="_blank"><img src="img/kb_02.jpg" /></a>
<h1>HI & WELCOME TO THE "ESTRO" SLIDER BY PIXELENTITY</h1>
</div>
<div data-delay="5" data-thumb="img/thumbs/kb_03.jpg">
<a href="#" target="_blank"><img src="img/blank.png" data-src="img/kb_03.jpg" /></a>
<h1>A KICK-ASS JQUERY PLUGIN WITH KEN BURNS & 2-WAY SWIPE TRANSITIONS</h1>
</div>
<div class="peKb_active" data-delay="5" data-thumb="img/thumbs/kb_04.jpg">
<a href="#" target="_blank"><img src="img/kb_04.jpg" /></a>
<h1>HI & WELCOME TO THE "ESTRO" SLIDER BY PIXELENTITY</h1>
</div>
<div class="peKb_active" data-delay="5" data-thumb="img/thumbs/kb_05.jpg">
<a class="video hd autoplay loop skiptonext" href="#"><img src="img/blank.png" data-src="img/kb_05.jpg" /></a>
<h1>A KICK-ASS JQUERY PLUGIN WITH KEN BURNS & 2-WAY SWIPE TRANSITIONS</h1>
</div>
</div><!--end peKenBurns slider -->
</div><!--end wrapper-->
</div><!--end annotation-->
<!-- 代码 结束 -->
</body>
</html>