使用jQuery仿蘋果官網焦點圖特效_jquery

這次我們要分享的這款jQuery焦點圖非常特別，它的外觀特別簡單，但又相當大氣。焦點圖的整體樣式是仿蘋果樣式的，由於jQuery的運用，我們只要點擊圖片下方的縮圖即可達到圖片切換的焦點圖特效，這款jQuery焦點圖插件非常適合在產片展示的網頁上使用。

接下來我們一起分享一下實現這款蘋果焦點圖的流程及原始碼。

HTML程式碼：

複製程式碼 程式碼如下:

   

   

   

   

http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/"> width= "920" style="max-width:90%" alt="使用jQuery仿蘋果官網焦點圖特效_jquery">

   

   

   

• 
• 
• 
• 

   

   

 

從以上HTML程式碼可以看出，整個焦點圖由一些div構成圖片容器，用ul li列表構成下面的縮圖。

CSS代碼：

複製程式碼 程式碼如下:

#畫廊{
    /* CSS3 盒子陰影 */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    盒子陰影：0 0 3px #AAAAAA;
    /* CSS3 圓角 */
    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    左下邊框半徑：4px;
    -moz-border-radius-bottomright:4px;
    -webkit-border-right-radius:4px;
    右下邊框半徑：4px;
    邊框：1px 純白；
    背景:url(img/panel.jpg) 重複-x 底部中心 #ffffff;
    /* 畫廊的寬度 */
    寬度：920px；
    溢位：隱藏；
}
#幻燈片{
    /* 這是投影片區域 */
    高度：400px；
    /* jQuery 隨後將寬度變更為所有投影片寬度的總和。 */
    寬度：920px；
    溢位：隱藏；
}
.幻燈片{
    浮動：左；
}
#選單{
    /* 這是縮圖的容器 */
    高度：45px；
}
ul{
    邊距：0px;
    填充：0px；
}
李{
    /* 每個縮圖都是 li 元素 */
    寬度：60px；
    顯示：內聯塊；
    清單樣式：無；
    高度：45px；
    溢位：隱藏；
}
li.inact:懸停{
    /* 非活動狀態，滑鼠停留時反白 */
    背景：url(img/pic_bg.png) 重複;
}
li.act,li.act:懸停{
    /* 拇指的活動狀態 */
    背景：url(img/active_bg.png) 不重複；
}
li. 執行一個{
    遊標：預設；
}
.fbar{
    /* 最左邊的垂直條，位於第一個縮圖旁邊 */
    寬度：2px；
    背景：url(img/divider.png) 右無重複；
}
李阿{
    顯示：塊；
    背景：url(img/divider.png) 右無重複；
    高度：35px；
    上方填入：10px;
}
一張圖片{
    邊框：無；
}

CSS程式碼也非常簡單，都是一些簡單設定而已。

jQuery程式碼：

複製程式碼程式碼如下：

$(文檔).ready(function(){
    /* 這段程式碼在 DOM 完全載入後執行 */
    var totWidth=0;
    var 位置 = new Array();
    $('#slides .slide').each(function(i){
        /* 遍歷所有投影片，並累計寬度儲存於 totWidth */
        位置[i]= totWidth;
        totWidth = $(this).width();
        /* 位置陣列包含每張投影片相對於容器左側部分的交換偏移量 */
        if(!$(this).width())
        {
            Alert("請填入所有圖片的寬度與高度！");
            回復錯誤；
        }
    });
    $('#slides').width(totWidth);
    /* 將 cotnainer div 的寬度改為所有投影片組合的精確寬度 */
    $('#menu ul li a').click(function(e,keepScroll){
            /* 在縮圖上點選 */
            $('li.menuItem').removeClass('act').addClass('inact');
            $(this).parent().addClass('act');
            var pos = $(this).parent().prevAll('.menuItem').length;
            $('#slides').stop().animate({marginLeft:-positions[pos] 'px'},450);
            /* 開始滑動動畫 */
            e.preventDefault();
            /* 阻止連結的預設操作 */
            // 若點選圖示則停止自動前進：
            if(!keepScroll)clearInterval(itvl);
    });
    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* 頁面載入時，將第一個縮圖標記為活動 */
    /*****
     *
     *    啟用自動前進。
     *
     ****/
    var 目前=1;
    函數 autoAdvance()
    {
        if(current==-1) return false;
$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);    // [true] 將作為第28 行click 函數的keepScroll 參數傳遞
        目前；
    }
    // 滑桿自動前進的秒數：
    var changeEvery = 10;
    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
    /* 自訂結束 */
});

這是焦點圖的重點，完成了圖片的動畫邏輯，點擊一下即可切換圖片。