基于jQuery的网站首页宽屏焦点图幻灯片


今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片。这款焦点图适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:在线预览...

今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片。这款焦点图适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

在线预览   

基于jQuery的网站首页宽屏焦点图幻灯片2015-01-16-jquery-focus.rar

实现的代码。

html代码:

  1. <!-- index-focus begin -->
  2.         <div class="sliderWrap">
  3.             <section class="banner-TAL">
  4.         <div class="viewport">
  5.             <ul class="item" style="height: 2748px; top: 0px;">

  6.                 <li class="bn-bg01">
  7.                     <div class="wrapper"><h2 class="bn-text">科技预见学习<br></h2><img class="frame" src="images/181450_53fc5e1a05317.jpg" width="610" height="458"></div>
  8.                 </li>
  9.                 <li class="bn-bg02">
  10.                     <div class="wrapper"><h2 class="bn-text">《天降奇师》<br>大型师生户外**</h2><img class="frame" src="images/180936_54a3cb60ab15b.jpg" width="610" height="458">
  11.                     </div>
  12.                 </li>

  13.                 <li class="bn-bg03">
  14.                     <div class="wrapper"><h2 class="bn-text">磨砺十载学而思<br>共创百年好未来</h2><img class="frame" src="images/TAL06.jpg" width="610" height="458"></div>
  15.                 </li>
  16.                 <li class="bn-bg04">
  17.                     <div class="wrapper"><h2 class="bn-text">在这里 不断探索<br>教育模式的多样化</h2><img class="frame" src="images/114637_53057a9d697b2.jpg" width="610" height="458">
  18.                     </div>
  19.                 </li>
  20.                 <li class="bn-bg05">
  21.                     <div class="wrapper"><h2 class="bn-text">在这里 科技 互联网<br>与教育完美融合</h2><img class="frame" src="images/120631_53df06c769e11.jpg" width="610" height="458">
  22.                     </div>
  23.                 </li>
  24.                                 <li class="bn-bg06">
  25.                     <div class="wrapper"><h2 class="bn-text">在这里 帮助孩子<br>个性化学习与成长</h2><img class="frame" src="images/103539_532ba57bdfee0.jpg" width="610" height="458">
  26.                     </div>
  27.                 </li>

  28.             </ul>
  29.         </div>
  30.     </section>
  31.             <section class="banner-TAL">
标签: 网站jQuery