这是一款基于HTML5的焦点图动画，它和其他焦点图不同的地方在于，它播放的不仅仅是图片，而是可以自定义控制的网页元素。它不仅在图片间切换有过渡动画效果，而且在切换时图片中的元素也将出现动画效果，比如图中的文字移动、打散、重新组合等。这款HTML5动画图片播放器算得上是高端大气上档次。
HTML代码
<div class="parallax-bg" id="slider-wrap">
<div class="slider parallax-bg" id="slider">
<div class="slider-sections sandbox">
<section class="first">
<img alt="Kendo UI" src="images/home-banner-1.png"/>
<div class="text">
<h2>SmartSite Ver 2.2<br />智能网站管理系统 </h2>
<p class="copy">采用前后台完全分离技术，通过标签（支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等）加模板技术.全站生成纯静态页。</p>
<p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
</div>
</section>
<section>
<img src="images/dataviz-home-image-q2.png" alt="Kendo UI" />
<div class="text" style="padding-top: 10px;">
<h2>企业网站管理系统</h2>
<p class="copy">单页面、单页面索引、新闻、产品展示、下载、友情链接、网上商城，在线支付、配送、支付方式管理、广告等模块。</p>
<p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
</div>
</section>
<section>
<img src="images/home_banner_web-q2.png" alt="Kendo UI" />
<div class="text">
<h2>智能移动网站管理系统</h2>
<p class="copy">基于jquery.Mobile、HTML5技术框架，前后台完全分离，采用标签加模板技术，全站生成纯静态页。</p>
<p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
</div>
</section>
