基于HTML5和CSS的焦点图全屏切换的炫酷特效，带有自动轮播图片,带有不同时间切换的jquery特效，切换时，背景图片会有细微的动态变化，略带有弹性效果，切换时图片和按钮有一定的时间差。先来看看主要的代码有哪些：
1 <section class="first"> 2 <img alt="Kendo UI" src="images/home-banner-1.png"/> 3 <div class="text"> 4 <h2>SmartSite Ver 2.2<br /> 5 智能网站管理系统 </h2> 6 <p class="copy">采用前后台完全分离技术，通过标签（支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等）加模板技术.全站生成纯静态页。</p> 7 <p class="button"> 8 <a href="http://www.jqshare.com/" onclick="_gaq.push(['_trackPageview', 'http://www.jqshare.com/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.jqshare.com/']);" href="http://www.jqshare.com/">Learn More</a> 9 </p> 10 </div> 11 </section>
上面的代码就是一个切换页面的布局，然后倒入js
1 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'></script> 2 <script type='text/javascript' src='js/common.js'></script> 3 <script type='text/javascript' src='js/slider.js'></script>
最终预览的效果是这样的：
以上就是这样特效的简介