西山居首頁jQuery焦點圖代碼

西山居首頁jQuery焦點圖代碼是一款帶文字描述，左右箭頭，索引按鈕，自動輪播切換的jQuery特效代碼。效果圖以下：

在線預覽    源碼下載

實現的代碼。

html代碼：

 <div style="height:10px;width:100%;"></div>
    <div class="main">
        <div class="kv">
            <ul class="kv_pic">
                <li><img src="images/index_kv1.jpg" alt="" /></li>
                <li><img src="images/index_kv2.jpg" alt="" /></li>
                <li><img src="images/index_kv3.jpg" alt="" /></li>
                <li><img src="images/index_kv4.jpg" alt="" /></li>
            </ul>
            <div class="kv_word">
                <ul>
                    <li>
                        <h3 class="tit1">家眷開放日</h3>
                        <h3 class="tit2">感謝有你 一路同行</h3>
                        <p>爲感謝家人們對居士們的默默支持與理解，西山居會在每年邀請家眷們參加一年一度的家眷開放日，感覺西山居的環境文化和辦公氛圍。</p>
                    </li>
                    <li>
                        <h3 class="tit1">2014神覓會</h3>
                        <h3 class="tit2">玩轉創意 遊戲穿越</h3>
                        <p>是否幻想過把遊戲場景搬到現實生活中？是否憧憬過穿越進遊戲裏當一回英雄俠士馳騁江湖？西山居士玩轉創意，將夢想中的世界在你我身邊呈現。咱們在辦公中游戲，在遊戲中辦公！！</p>
                    </li>
                    <li>
                        <h3 class="tit1">西山居俱樂部</h3>
                        <h3 class="tit2">Hello，西山居俱樂部！</h3>
                        <p>在這裏，咱們爲你尋找志同道合的朋友；在這裏，咱們爲你豐富枯燥的業餘生活。攝影、羽毛球、乒乓球、足球、游泳、籃球……準備好加入咱們了嗎？</p>
                    </li>
                    <li>
                        <h3 class="tit1">2015西山居年會</h3>
                        <h3 class="tit2">縱情聚·變  同享盛事</h3>
                        <p>每年總有一晚，咱們把酒言歡，共敘期許；每年總有一刻，咱們擁抱佳績，共聚一堂。這是一個你們庭，這是一個大江湖，各路英雄豪傑共進西山居年夜飯，滿載而歸結束一年的辛勞。</p>
                    </li>
                </ul>
            </div>
            <div class="control">
                <div class="prev"><img src="images/icons_move_left.jpg" alt="" /></div>
                <div class="next"><img src="images/icons_move_right.jpg" alt="" /></div>
            </div>
            <div class="kv_dot">
                <ul>
                    <li class="action"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

js代碼：

 $(document).ready(function () {
            var kv_num = 0;
            function nextKv() {
                $(".control").attr("style", "pointer-events:none");
                kv_num++;
                if (kv_num == 4) { kv_num = 0; }
                $(".kv_pic").animate({ left: -1000 * kv_num }, {
                    easing: 'easeInOutQuad', duration: 500, complete: function () {
                        $(".control").attr("style", "pointer-events:auto");
                    }
                });
                $(".kv_word>ul").stop().animate({ left: -340 * kv_num }, { easing: 'easeInOutQuad', duration: 800, complete: function () { } });
                $(".kv_dot ul li").removeClass("action").eq(kv_num).addClass("action");
            }
            function prevKv() {
                $(".control").attr("style", "pointer-events:none");
                kv_num--;
                if (kv_num == -1) { kv_num = 3; }
                $(".kv_pic").animate({ left: -1000 * kv_num }, {
                    easing: 'easeInOutQuad', duration: 500, complete: function () {

                        $(".control").attr("style", "pointer-events:auto");
                    }
                });
                $(".kv_word>ul").stop().animate({ left: -340 * kv_num }, { easing: 'easeInOutQuad', duration: 800, complete: function () { } });
            }
            $(".control .next").on("click", nextKv);
            $(".control .prev").on("click", prevKv);
            // 自動輪播
            setInterval(nextKv, 3500);

            var top = $(".footer").offset().top;
            if ((top + 80) <= $(window).height()) {
                $(".footer").attr("style", "position:fixed; bottom:0;");
            }
        });

http://www.w2bc.com/article/53162