怎么用jquery做上下翻页

jquery上下翻页插件实现（js文件引用需要修改）

ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}



(function($){
$.fn.extend({
    Scroll:function(opt,callback){
  //参数初始化
    if(!opt) var opt={};
    var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮
    var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮
    var timerID;
    var _this=this.eq(0).find("ul:first");
    var lineH=_this.find("li:first").height(), //获取行高
    line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
    speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒）
    timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
    if(line==0) line=1;
    var upHeight=0-line*lineH;
    //滚动函数
    var scrollUp=function(){
    _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
    _this.animate({
        marginTop:upHeight
    },speed,function(){
        for(i=1;i<=line;i++){                                   _this.find("li:first").appendTo(_this);
        }
        _this.css({marginTop:0});
        _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
    });
    }
    
    //Shawphy:向下翻页函数
    var scrollDown=function(){
        _btnDown.unbind("click",scrollDown);
        for(i=1;i<=line;i++){
            _this.find("li:last").show().prependTo(_this);
        }
        _this.css({marginTop:upHeight});
        _this.animate({
            marginTop:0
        },speed,function(){
            _btnDown.bind("click",scrollDown);
        });
    }
    
    //Shawphy:自动播放
    var autoPlay = function(){
        if(timer)timerID = window.setInterval(scrollUp,timer);
    };
    var autoStop = function(){
        if(timer)window.clearInterval(timerID);
    };
                 
    //鼠标事件绑定
    _this.hover(autoStop,autoPlay).mouseout();
    _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
    _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
    }       
    })
})(jQuery);

$(document).ready(function(){
    $("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn1",down:"btn2"});
});



多行滚动演示：


  



好漂亮十多个



CSS制作斜角上有背景图片的Div层



Js实现的层展开、层折叠效果，默认折叠



DIV固定在右下角位置的CSS实现方法



JavaScript未知高度元素的垂直居中的方法



渐变彩色的文字



指定文字逐条显示



滚动的标题栏



JS 4屏平滑滚动幻灯片特效



图片的无缝滚动（纵向、横向）



鼠标触及带边框的菜单



比较实用的CSS控制链接颜色效果



鼠标接触或者离开图片时，图片大小会相应变化



特殊的鼠标悬停提示