基于jquery的循环左右滚动和上下滚动效果

@charset "utf-8";  
/* CSS Document */  
* {  
margin:0;  
padding:0;  
}  
body {  
font-size:12px;  
}  
/*左右滚动*/  
#scrollable {  
background-color:#efefef;  
border:1px solid #ddd;  
padding:10px 8px;  
width:523px;  
height:65px;  
margin-top:30px;  
}  
div.items {  
height:66px;  
margin-left:8px;  
float:left;  
width:475px !important;  
}  
div.items a {  
display:block;  
float:left;  
margin-right:8px;  
width:88px;  
height:66px;  
background:#BBB;  
font-size:50px;  
color:#ccc;  
line-height:66px;  
text-decoration:none;  
text-align:center;  
cursor:pointer;  
}  
div.items a:hover {  
color:#999;  
}  
div.items a.active {  
background-position:-174px 0;  
color:#555;  
cursor:default;  
}  
a.prev, a.next {  
background:url(left.png) no-repeat 0 0;  
display:block;  
width:18px;  
height:18px;  
float:left;  
margin:22px 0 0 0;  
cursor:pointer;  
}  
a.next {  
background-image:url(right.png)  
}  
a.prev:hover {  
background-position:0 -18px;  
}  
a.next:hover {  
background-position:0 -18px;  
}  
/*上下滚动*/  
#scrollDiv {  
width: 300px;  
height: 25px;  
line-height: 25px;  
border: #ccc 1px solid;  
overflow: hidden;  
}  
#scrollDiv li {  
height: 25px;  
padding-left: 10px;  
}      

js代码

// JavaScript Document  
  
// 左右滚动  
(function($) {  
    $.fn.extend({  
function(opt, callback) {  
if (!opt) var opt = {};  
var _btnleft = $(opt.left);  
var _btnright = $(opt.right);  
var timerID;  
var _this = this.eq(0).find("div").eq(1);  
var lineW = _this.find("a:first").width(),  
//获取列宽   
            line = opt.line ? parseInt(opt.line, 10) : parseInt(_this.width() / lineW, 10),  
//每次滚动的列数，默认为一屏，即父容器列宽   
//滚动速度，数值越大，速度越慢（毫秒）   
//滚动的时间间隔（毫秒）   
if (line == 0) line = 1;  
var upWidth = 0 - line * lineW;  
//滚动函数   
var scrollLeft = function() {  
if (!_this.is(":animated")) {  
                    _this.animate({  
                        left: upWidth  
                    },  
                    speed,  
function() {  
for (i = 1; i <= line; i++) {  
"a:first").appendTo(_this);  
                        }  
                        _this.css({  
                            left: 0  
                        });  
                    });  
                }  
            }  
var scrollRight = function() {  
if (!_this.is(":animated")) {  
for (i = 1; i <= line; i++) {  
"a:last").show().prependTo(_this);  
                    }  
                    _this.css({  
                        left: upWidth  
                    });  
                    _this.animate({  
                        left: 0  
                    },  
                    speed,  
function() {});  
                }  
//Shawphy:自动播放   
var autoPlay = function() {  
if (timer) timerID = window.setInterval(scrollLeft, timer);  
            };  
var autoStop = function() {  
if (timer) window.clearInterval(timerID);  
//鼠标事件绑定   
            _this.hover(autoStop, autoPlay).mouseout();  
"cursor", "pointer").click(scrollLeft).hover(autoStop, autoPlay);  
"cursor", "pointer").click(scrollRight).hover(autoStop, autoPlay);  
        }  
    })  
})(jQuery);  
$(document).ready(function() {  
"#scrollable").Scroll({  
        line: 5,  
        speed: 500,  
        timer: 3000,  
".prev",  
".next"  
    });  
});  
  
// 上下滚动  
function AutoScroll(obj) {  
"ul:first").animate({  
"-25px"  
    },  
    500,  
function() {  
this).css({  
"0px"  
"li:first").appendTo(this);  
    });  
}  
$(document).ready(function() {  
var myar = setInterval('AutoScroll("#scrollDiv")', 1000);  
"#scrollDiv").hover(function() {  
        clearInterval(myar);  
    },  
function() {  
'AutoScroll("#scrollDiv")', 1000)  
//当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始  
});      

html代码

<div style="margin:0 auto;width:500px;">  
<div id="scrollable"> <a class="prev" href="#"></a>  
<div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;">  
<div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo"> <a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> <a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a> <a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a> </div>  
<br clear="all"/>  
</div>  
<a class="next" href="#"></a> </div>  
</div>  
  
<!-- 上下滚动 -->  
<div id="scrollDiv">  
<ul>  
<li><a href="http://www.sina.com">欢迎浏览新浪网</a></li>  
<li><a href="http://www.163.com">欢迎浏览网易</a></li>  
<li><a href="http://www..com">欢迎进入程序员之家</a></li>  
<li><a href="http://www.51aspx.com">很好的源代码下载区</a></li>  
<li><a href="http://www.msdn.com">msdn</a></li>  
<li><a href="http://www.baidu.com">欢迎浏览百度网</a></li>  
</ul>  
</div