<script type="text/javascript">
//向上滚动效果
function AutoScroll1(obj) {var scrollHeight=$("ul  li:first").height();
if ($(obj).attr("name") != "hovered") {
$(obj).find("#ul1").animate({marginTop: "-"+scrollHeight+"px"
}, 1000, function() {$("ul:first li").eq(2).fadeIn(500);$("ul:first li:gt(3)").attr("style","background:#006699;display:block");$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);$("ul:first li:gt(2)").attr("style","background:#006699;display:none");
});
}
}//向下滚动效果
function AutoScroll2() {if ($("#scrollDiv2").attr("name") != "hovered") {$("#scrollDiv2 #ul2 li:last").hide().insertBefore($("#scrollDiv2 #ul2 li:first").slideDown(1000));}
}function HoverFun(obj)
{$(obj).hover(function () {$(this).attr("name", "hovered");}, function () {$(this).removeAttr("name");});
}$(document).ready(function() {HoverFun("#scrollDiv1");HoverFun("#scrollDiv2");setInterval('AutoScroll1("#scrollDiv1")', 3000);setInterval("AutoScroll2()", 3000);
});
</script>
<style type="text/css">
ul, li
{
margin: 1px;
padding: 0;
height: 190px;
width:  190px;
color:  White;
font-size:24px;
font-weight:bold;
text-align:center;
}
.banner_little
{height: 380px;line-height: 190px;overflow: hidden;
}
ul li
{list-style-type:none;
}</style>
<div id="scrollDiv1" class="banner_little" style="margin-left:100px;position:absolute"><ul id="ul1"><li style="background:#006699">向上翻，第一行</li>                                   <li style="background:#006699">向上翻，第二行</li><li style="background:#006699;display:none">向上翻，第三行</li><li style="background:#006699;display:none">向上翻，第四行</li></ul>
</div><div id="scrollDiv2" class="banner_little"  style="margin-left:400px;position:absolute"><ul id="ul2"><li style="background:#006699;">向下翻，第一行</li>                                   <li style="background:#006699;">向下翻，第二行</li><li style="background:#006699;">向下翻，第三行</li><li style="background:#006699;">向下翻，第四行</li></ul>
</div>