基于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({
        Scroll: 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),
            //每次滚动的列数，默认为一屏，即父容器列宽 
            speed = opt.speed ? parseInt(opt.speed, 10) : 500; //滚动速度，数值越大，速度越慢（毫秒） 
            timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒） 
            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++) {
                            _this.find("a:first").appendTo(_this);
                        }
                        _this.css({
                            left: 0
                        });
                    });
                }
            }
            var scrollRight = function() {
                if (!_this.is(":animated")) {
                    for (i = 1; i <= line; i++) {
                        _this.find("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();
            _btnleft.css("cursor", "pointer").click(scrollLeft).hover(autoStop, autoPlay);
            _btnright.css("cursor", "pointer").click(scrollRight).hover(autoStop, autoPlay);
        }
    })
})(jQuery);
$(document).ready(function() {
    $("#scrollable").Scroll({
        line: 5,
        speed: 500,
        timer: 3000,
        left: ".prev",
        right: ".next"
    });
});

// 上下滚动
function AutoScroll(obj) {
    $(obj).find("ul:first").animate({
        marginTop: "-25px"
    },
    500,
    function() {
        $(this).css({
            marginTop: "0px"
        }).find("li:first").appendTo(this);
    });
}
$(document).ready(function() {
    var myar = setInterval('AutoScroll("#scrollDiv")', 1000);
    $("#scrollDiv").hover(function() {
        clearInterval(myar);
    },
    function() {
        myar = setInterval('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.csdn.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