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

2個主要部分，頭部的標(biāo)題和導(dǎo)航部分，和主要的功能實現(xiàn)區(qū)域；

1.頭部

    

        
動漫視頻
        <
        >
    
    

         
         
         
    

2.功能區(qū)域

    

        

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

添加樣式

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

1.下一頁

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

3.上一頁

4.當(dāng)上一頁滾動到第一頁，再點擊上一頁的時候，需要前進(jìn)到最后一頁

5.當(dāng)點擊圓圈的時候，前進(jìn)到任意一頁

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

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

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

1.下一頁(goNext)

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

2.回到頂部(goTop)

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

3.上一頁(goBack)

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

4.回到底部(goBotoom)

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

5.到任意頁(goPage)

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

當(dāng)每個小功能實現(xiàn)后,組合下功能,并綁定功能

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