jQueryゼリー式ボタンフォーカスマップに基づく切り替えコード

jQueryゼリーボタンフォーカスマップに基づいてコードを切り替えます.これはjQuery+CSS 3に基づいて実現されるピクチャ切替コードである.効果図は以下の通りです.

オンラインプレビュー     ソースのダウンロード
実装されたコード.
htmlコード:

<div class="index_slide">
        <div class="wrap_1005 slide">
            <ul class="slide_con clearfix">
                <li>
                    <img src="images/index_slide_con01.png" alt="    "><a href="http://www.w2bc.com/"
                        class="slide_con_a" target="_blank">    </a></li>
                <li>
                    <img src="images/index_slide_con02.png" alt="    "><a href="http://www.w2bc.com/"
                        class="slide_con_a" target="_blank">    </a></li>
                <li style="display: block;">
                    <img src="images/index_slide_con03.png" alt="    "><a href="http://www.w2bc.com/"
                        class="slide_con_a" target="_blank">    </a></li>
                <li>
                    <img src="images/index_slide_con04.png" alt="    "><a href="http://www.w2bc.com/"
                        class="slide_con_a" target="_blank">    </a></li>
                <li>
                    <img src="images/index_slide_con05.png" alt="    "><a href="http://www.w2bc.com/"
                        class="slide_con_a" target="_blank">    </a></li>
            </ul>
            <ul class="slide_index clearfix">
                <li class="one"></li>
                <li class="two"></li>
                <li class="three hover"></li>
                <li class="four"></li>
                <li class="five"></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/w2bc.js"></script>

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