正益无线首页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