摘要：需要實現的效果樣式分析個主要部分，頭部的標題和導航部分，和主要的功能實現區域頭部動漫視頻功能區域添加樣式此處需要注意，因為需要給添加方法，所以需要給它的才能使生效功能分析下一頁當下一頁滾動到最后一頁面，再點擊

2個主要部分，頭部的標題和導航部分，和主要的功能實現區域；

1.頭部

    

        
動漫視頻
        <
        >
    
    

         
         
         
    

2.功能區域

    

        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
10
            
11
            
12
        
    

添加樣式

此處需要注意，因為需要給 contentBox 添加 animate left 方法，所以需要給它的 position : related 才能使 animate left 生效

1.下一頁

2.當下一頁滾動到最后一頁面，再點擊下一頁的時候，需要返回到第一頁

3.上一頁

4.當上一頁滾動到第一頁，再點擊上一頁的時候，需要前進到最后一頁

5.當點擊圓圈的時候，前進到任意一頁

首先,我們在接下來的功能中常用的一些元素，先賦值給變量

$vBox = $("#viewBox");                          /* 可以見到的展示區域 */
$cBox = $("#contentBox");                       /* 內容區域 */
vWidth = $vBox.width();                         /* 可見區域的寬度 */
cWidth = $cBox.width();                         /* 內容區域的寬度 */

然后，我們有5個小功能，下一頁(goNext)，回到頂部(goTop)，上一頁(goBack)，回到底部(goBotoom)，到任意頁(goPage)

1.下一頁(goNext)

var vLeft=$cBox.position().left;                //內容區域距左側的距離
$cBox.animate({left: "-="+vWidth+"px"});

2.回到頂部(goTop)

var vLeft=$cBox.position().left;
$cBox.animate({left: 0});

3.上一頁(goBack)

var vLeft=$cBox.position().left;                //內容區域距左側的距離
$cBox.animate({left: "+="+vWidth+"px"});

4.回到底部(goBotoom)

var vLeft=$cBox.position().left;                //內容區域距左側的距離
$cBox.animate({left: -cWidth+vWidth});

5.到任意頁(goPage)

var vLeft=$cBox.position().left;                //內容區域距左側的距離
$cBox.animate({left: -vWidth*page});            //傳遞一個page參數用來知道需要跳轉到第幾頁

當每個小功能實現后,組合下功能,并綁定功能

var $vBox;
var $cBox;
var vWidth;
var cWidth;
$(function () {
    $vBox = $("#viewBox");
    $cBox = $("#contentBox");
    vWidth = $vBox.width();
    cWidth = $cBox.width();

    $("#header span:last-child").click(function () {
        go("next");
    })
    $("#header span:nth-child(2)").click(function () {
        go("back");
    })
    
    $("#tips>span").click(function () {
        var $ThisS=$(this);
        $ThisS.addClass("on").siblings().removeClass();
        go($ThisS.index());
    })

})
        
function go(page) {
    var vLeft=$cBox.position().left;
    if (!$cBox.is(":animated")){
        switch (page){
            case "next":
                if( vLeft > -cWidth-vLeft ){
                    $cBox.animate({left: "-="+vWidth+"px"});
                }else{
                    go("top");
                }
                break;

            case "back":
                if( vLeft < 0){
                    $cBox.animate({left: "+="+vWidth+"px"});
                }else{
                    go("bottom");
                }
                break;

            case "top":
                $cBox.animate({left: 0});
                break;

            case "bottom":
                $cBox.animate({left: -cWidth+vWidth});
                break;

            default:
                $cBox.animate({left: -vWidth*page});
                break;
        }
    }
}

下面是全部代碼

    
    
    
    
    
    
    
    
    
    
    


    

        
動漫視頻
        <
        >
    
    

         
         
         
    
    

        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
10
            
11
            
12