// 滚动插件
(function($) {
$.fn.extend({
Scroll: function(opt, callback) {
// params init
if (!opt) var opt = {};
var objUp = opt.up ? $("#" + opt.up) : $("#btn1"),
objDown = opt.down ? $("#" + opt.down) : $("#btn2");
var timeId;
var that = this.eq(0).find("ul:first");
// get line height
var lineH = that.find("li:first").height(),
// get scroll line num, default one screen, namely parent's container height
line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height()/lineH, 10),
// get scroll speed, default 500ms
speed = opt.speed ? parseInt(opt.speed, 10) : 500,
// get scroll time interval
timer = opt.timer ? parseInt(opt.timer, 10) : 3000;
if (!line) line = 1;
var upHeight = 0 - line * lineH;
// scroll up func
var scrollUp = function() {
// unbind up scroll func
objUp.unbind('click', scrollUp);
that.animate({
marginTop: upHeight
}, speed, function() {
for(i=1;i<=line;i++){
that.css({marginTop: 0}).find("li:first").appendTo(that);
}
// bind up scroll func
objUp.bind('click', scrollUp);
});
}
// scroll down func
var scrollDown = function() {
// unbind down scroll func
objDown.unbind('click', scrollDown);
for(i=1;i<=line;i++){
that.css({marginTop: upHeight}).find("li:first").appendTo(that);
}
that.animate({
marginTop: 0
}, speed, function() {
// bind down scroll func
objDown.bind('click', scrollDown);
});
}
// bind mouse event
// auto play
var autoPlay = function() {
if (timer) timeId = setInterval(scrollDown, timer);
}
var autoStop = function() {
if (timer) clearInterval(timeId);
}
that.hover(autoStop, autoPlay).mouseout();
// bind up and down event
objUp.css("cursor", "pointer").click(scrollUp).hover(autoStop, autoPlay);
objDown.css("cursor", "pointer").click(scrollDown).hover(autoStop, autoPlay);
}
});
})(jQuery);
<div class="scrollDiv" id="s1">
<ul>
<li><a href="#">jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式</a></li>
<li><a href="#">jquery 图片切换 switchable 带左右按钮控制分页索引图片切换</a></li>
<li><a href="#">jquery powerFloat万能浮动框提示插件 支持图片、文字、ajax异步加载、表单验证等</a></li>
<li><a href="#">jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等</a></li>
<li><a href="#">jquery 表单美化 jquery tzCheckbox 复选框美化 自定义默认复选框</a></li>
<li><a href="#">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
<li><a href="#">jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图</a></li>
<li><a href="#">jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放</a></li>
</ul>
</div>
<span id="btn1" >点击向上滚动</span> <span id="btn2">点击向下滚动</span>
function AutoScroll(obj) {
$obj = $(obj);
$obj.find("ul:first").animate({
marginTop: -25
}, 500, function() {
$(this).css({marginTop: 0}).find("li:first").appendTo(this);
});
}
$(function() {
setInterval('AutoScroll("#s1")', 2000);
$("#s1").Scroll({line: 1, speed: 500, timer: 2000});
$("#s1").Scroll({line:4,speed:500,timer:2000,up:"btn1",down:"btn2"});
});