摘要：需要实现的效果样式分析个主要部分，头部的标题和导航部分，和主要的功能实现区域头部动漫视频功能区域添加样式此处需要注意，因为需要给添加方法，所以需要给它的才能使生效功能分析下一页当下一页滚动到最后一页面，再点击

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