你的位置:首页 > Java教程

[Java教程]正益无线首页jQuery焦点图


分享一款正益无线首页jQuery焦点图,带索引按钮,自动轮播切换特效焦点图代码。

在线预览    源码下载

实现的代码。

html代码:

<div id="slideBox" class="slideBox">  <div class="hd">    <ul><li></li><li></li><li></li></ul>  </div>  <div class="bd">    <ul>      <li style="background: url(images/banner2_1.jpg) 50% 0px no-repeat;">        <div id="a3"></div>        <div id="a4"></div>        <div id="a5"></div>      </li>      <li style="background: url(images/banner4.png) 50% 0px no-repeat;">        <div id="a12"></div>          <div id="a11"></div>      </li>      <li class="banner1">        <a href="http://www.w2bc.com" target="_blank" class="content1">          <div id="a20"></div>            <div class="b2_word">              <var id="a21">为</var><span id="a23"></span><var id="a22">而生</var>            </div>          <div id="a24">AppCan引领企业进入移动管理新时代</div>        </a>      </li>    </ul>    </div></div><script src="js/jquery.SuperSlide.2.1.1.js"></script> <script type="text/javascript">// 轮播$(".slideBox").slide({mainCell:".bd ul",effect:"leftLoop",autoPlay:true,  startFun:function(i,c){  del();  switch(i){        case 0:            $("#a3").addClass('animation3');            $("#a4").addClass('animation4');            $("#a5").addClass('animation5');            break;        case 1:            $("#a11").addClass('animation8');            $("#a12").addClass('animation9');            break;        // case 2:            // $("#a8").addClass('animation6');            // $("#a9").addClass('animation7');            // $("#a10").addClass('animation7');            // break;        case 2:                  $(".content1 #a20").addClass('animation20');            $(".b2_word #a21").addClass('animation21');            $(".b2_word #a22").addClass('animation21');            $(".b2_word #a23").addClass('animation20');            $(".content1 #a24").addClass('animation22');            break;        default:break;      }  }});</script>

via:http://www.w2bc.com/Article/45590