web（pc） 網站引導頁效果實現【原創】

前言

公司官網會員頁面菜單導航過多，所以需要添加一個引導頁（第一次登錄或注冊后進入會員中心）。一開始想着去百度一個簡單的實現（我是做后台的，前端頁面改改效果還行，徒手去做有點困難），並沒有找到合適的效果，提供的示例代碼比較混亂（完全看不懂的那種）。

只能自己想辦法。分析引導頁效果，無非就是全屏展示，然后點擊一張引導頁面，跳出下一張引導頁，展示結束后隱藏引導頁。

一開始想用 swiper，來個全屏的輪播圖做引導頁，但不太好對上下頁按鈕監聽，實現最終隱藏引導頁的效果。

那么就自己構建一個 HTML 結構，展示引導頁圖片，並添加相應按鈕位置，設置按鈕點擊事件即可。

實現

html 部分

<ul class="guide_imgs">
    <li class="close"></li>
    <li><img src="{DT_SKIN}guide/guide1.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide2.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide3.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide4.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide5.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide6.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide7.jpg"/></li>
</ul>

{DT_SKIN} 為 destoon 模板標簽，表示默認皮膚的地址，可替換成自己的目錄路徑。

css 部分

.guide_imgs {
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.guide_imgs li {
    width: 100%;
    height: 100%;
}
.guide_imgs li:first-child {
    position: absolute;
    right: 0;
    width: 100px;
    height: 60px;
}
.guide_imgs li img{
    width: 100%;height: 100%;
}
</style>

jQuery 部分

$('.guide_imgs li').click(function () {
    if($(this).hasClass('close')) {
        $(this).parent().remove();
    } else {
        $(this).remove();
    }
});

既然使用了 jQuery, 那么自然要在 html 頁面中引入 jQuery 庫文件，否則會報錯。

我的示例里，點擊引導圖片會將當前頁面刪除，借此實現切換下一頁的效果。並單獨定義了一個 “跳過” 按鈕（用 class 值進行區分），定位在引導頁面的右上角，點擊則刪除所有引導圖片，退出引導頁面。

以這個思路走下去，也可以定義其他類型的按鈕，不過如果需要查看上一頁，將當前引導圖片刪除的方式就不合適了。這種情況下，可以考慮使用 css 樣式 display:none 和 display:block 進行切換展示，也可以使用 jQuery 的 show() 和 hide() 方法進行切換展示。

考慮到當前頁面文檔高度可能超過了屏幕可視高度，也就是頁面存在滾動條的情況，可以在展示引導頁的同時，對 body 添加 overflow:hidden 來取消滾動條。

完整版

<ul class="guide_imgs">
    <li class="close_guide"></li>
    <li><img src="{DT_SKIN}guide/guide1.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide2.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide3.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide4.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide5.jpg"/></li>
    <!--<li><img src="{DT_SKIN}guide/guide6.jpg"/></li>-->
    <li class="last_guide"><img src="{DT_SKIN}guide/guide7.jpg"/></li>
    <li class="prev_guide"></li>
</ul>

.guide_imgs {
    position: absolute;
    z-index: 99999;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.guide_imgs li {
    width: 100%;
    height: 100%;
}
.guide_imgs li:first-child {
    position: absolute;
    right: 0;
    width: 100px;
    height: 60px;
}
.guide_imgs li:last-child {
    position: absolute;
    right: 154px;
    bottom: 14px;
    width: 128px;
    height: 60px;
    /*border: 1px solid #ff0000;*/
}
.guide_imgs li img{
    width: 100%;height: 100%;
}

$('.guide_imgs li').click(function () {
    if($(this).hasClass('close_guide')) {
        $(this).parent().remove();
    } else if($(this).hasClass('prev_guide')) {
        $('.prev_show').show().removeClass('prev_show').prev().addClass('prev_show');
    } else {
        $(this).prev().removeClass('prev_show');
        $(this).addClass('prev_show');
        $(this).hide();
        if ($(this).hasClass('last_guide')) {
            $(this).parent().remove();
        }
    }
});

右下角位置添加了一個上一頁的按鈕，這就需要增加一個 class　判斷分支，並且使用 hide（） 和 show() 進行切換展示。

以下是要實現的引導圖示例：