三屏基于html5兼容IE6带描述图片轮播特效

三屏基于html5兼容IE6带描述图片轮播特效，背景跟随滚动，带下载按钮和查看详情按钮，兼容各种主流浏览器，包括IE6

1、将如下代码拷贝到head区

<link href="css/slider.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='js/common.js'></script>
<script type='text/javascript' src='js/slider.js'></script>

2、把以下代码拷贝到你想引用的地方

<header>
 <div class="header-content home">
  <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="http://www.5imoban.net/" onclick="_gaq.push(['_trackPageview', 'http://www.5imoban.net/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.5imoban.net/']);" href="http://www.5imoban.net/">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="http://www.5imoban.net/" onclick="_gaq.push(['_trackPageview', 'http://www.5imoban.net/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.5imoban.net/']);" href="http://www.5imoban.net/">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="http://www.5imoban.net/" onclick="_gaq.push(['_trackPageview', 'http://www.5imoban.net/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.5imoban.net/']);" href="http://www.5imoban.net/">Learn More</a></p> </div> </section></div> </div> <a class="slider-prev" href="javascript: void(0)">?</a> <a class="slider-next" href="javascript: void(0)">?</a>
  </div>
 </div>
</header>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！