html代码如下：
循环滚动列表
1. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 2. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 3. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 4. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 5. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 6. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 7. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 8. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。
1. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 2. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 3. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 4. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 5. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 6. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 7. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。 8. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。
css样式如下：
@charset utf-8;/* 简单reset */body, ul, li { margin: 0; padding: 0;}body { font: 14px/24px microsoft yahei; color: #333;}ul { list-style: none; }a { color: #333; outline: none; text-decoration: none;}a:hover { color: #2986dd; }img { border: none; }.clearfix:after { visibility: hidden; display: block; font-size: 0; content: ; clear: both; height: 0;}.clear { display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: .; overflow: hidden;}.wrap { width: 900px; padding-top: 30px; margin: 0 auto;}.boxs { padding: 15px; margin: 0 auto 30px; background-color: #e4fbff;}.box01 { width: 870px; }.box02 { float: left; width: 400px;}.box03 { float: right; width: 400px;}.box04 { width: 720px; }/* 具体样式 ---------- *//* 通用必需样式 */ /* ps：有些重要样式在js里先写好了，下面id容器、ul和li标签的样式比较重要 */ .autobox { position: relative; margin: 0 auto; overflow: hidden;}.autobox ul { position: absolute; list-style: none; z-index: 2;}/* 第一、四个列表 */ /* ps：左右滚动型列表需要css定义高度，li标签可以有margin值 */#autoscroll01, #autoscroll04 { width: auto; height: 174px;}#autoscroll01 ul li, #autoscroll04 ul li { float: left; width: 128px; height: 168px; padding: 3px; margin: 0 5px; _display: inline;}#autoscroll01 li a, #autoscroll04 li a { display: block; padding: 3px; border: 1px solid #dbdbdb; box-shadow: 0 0 3px rgba(170, 223, 252, 0.5);}#autoscroll01 li a:hover, #autoscroll04 li a:hover { border-color: #71ddff; box-shadow: 0 0 3px rgba(77, 185, 245, .90);}#autoscroll01 li img, #autoscroll04 li img { display: block; width: 120px; height: 160px;}/* 第二、三个列表 */ /* ps：上下滚动型列表需要css定义宽度，li标签尽量不要设置margin值 */#autoscroll02, #autoscroll03 { width: 100%; height: auto;}#autoscroll02 ul li { height: 30px; line-height: 30px; overflow: hidden;}#autoscroll03 ul li { height: 40px; line-height: 40px; overflow: hidden;}#autoscroll02 li a, #autoscroll03 li a { display: block; width: 100%; height: 24px; line-height: 24px; margin: 3px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}#autoscroll03 li a { margin: 8px 0; }
js代码如下：
/** * name : 循环滚动列表 **/ (function(jquery){ $.fn.autoscroll = function (o) { o = $.extend({ //设置默认参数 direction: 'left', interval: null, speed: null, distance: null, liwidth: null, liheight: null, shownum: null },o || {}); return this.each(function(){ //回调开始 var $ts = $(this), $ul = $ts.children(ul), $li = $ul.children(li), len = $li.length; if (o.direction == 'up' || o.direction == 'down' ){ //根据类型设置css $ts.css({ width: 100%, height: o.shownum * o.liheight }); $ul.css({ width: 100%, height: len * o.liheight }); $li.css({ float: none, width: 100%, height: o.liheight, margin: 0,padding: 0 }); }; if (o.direction == 'left' || o.direction == 'right' ){ //其实也可以在css里写好 $ts.css({ width: o.shownum * o.liwidth }); $ul.css({ width: len * o.liwidth }); $li.css({ float: left }); }; switch (o.direction){ //分四种情况，进行事件调用 case 'left': sroleft(); break; case 'right':sroright(); break; case 'up': sroup(); break; case 'down': srodown(); break; }; function sroleft(){ //向左滚动事件 $ul.css(left, 0); var left; function leftmoving(){ var dis = -o.distance, dif = -o.liwidth * (len - o.shownum); left = parsefloat($ul.css(left)); if (left <= dif){ $ul.css(left,0); left = 0; $ul.delay(o.interval); }; var ltdis = left + dis; if(ltdis <= dif){ ltdis = dif; }; $ul.animate({left:ltdis+px}, o.speed); }; $ul.hover( //鼠标移上、移下的阻止与恢复滚动 function(){ clearinterval(fnleft); }, function(){ fnleft = setinterval(function(){leftmoving()}, o.interval); } ); fnleft = setinterval(function(){leftmoving()}, o.interval); }; function sroright(){ //向右滚动事件 $ul.css(right, 0); var right; function rightmoving(){ var dis = -o.distance, dif = -o.liwidth * (len - o.shownum); right = parsefloat($ul.css(right)); if (right <= dif){ $ul.css(right,0); right = 0; $ul.delay(o.interval); }; var rtdis = right + dis; if(rtdis <= dif){ rtdis = dif; }; $ul.animate({right:rtdis+px}, o.speed); }; $ul.hover( function(){ clearinterval(fnright); }, function(){ fnright = setinterval(function(){rightmoving()}, o.interval); } ); fnright = setinterval(function(){rightmoving()}, o.interval); }; function sroup(){ //向上滚动事件 $ul.css(top, 0); var top; function upmoving(){ var dis = -o.distance, dif = -o.liheight * (len - o.shownum); top = parsefloat($ul.css(top)); if (top <= dif){ $ul.css(top,0); top = 0; $ul.delay(o.interval); }; var tpdis = top + dis; if(tpdis <= dif){ tpdis = dif; }; $ul.animate({top:tpdis+px}, o.speed); }; $ul.hover( function(){ clearinterval(fnup); }, function(){ fnup = setinterval(function(){upmoving()}, o.interval); } ); fnup = setinterval(function(){upmoving()}, o.interval); }; function srodown(){ //向下滚动事件 $ul.css(bottom,0); var bottom; function downmoving(){ var dis = -o.distance, dif = -o.liheight * (len - o.shownum); bottom = parsefloat($ul.css(bottom)); if (bottom <= dif){ $ul.css(bottom,0); bottom = 0; $ul.delay(o.interval); }; var bmdis = bottom + dis; if(bmdis <= dif){ bmdis = dif; }; $ul.animate({bottom:bmdis+px}, o.speed); }; $ul.hover( function(){ clearinterval(fndown); }, function(){ fndown = setinterval(function(){downmoving()}, o.interval); } ); fndown = setinterval(function(){downmoving()}, o.interval); }; }); };})(jquery);
兼容到ie6+，jq库用1.7+的都没问题 。