Juqery让世界更美好超级简单实用的（上、下）自动翻的最佳效果，有图为证！

     今天是我第一次写博文，虽然我注册有1年多了，但是很少在平时去总结自己的一些经验，我在博客园学到了很多知识，在博客园这个大家庭里，使我深深的体会到，只有分享才会获得更多的收获，希望在今后得日子里能坚持多写写技术文章，多提升自己的技术，也希望能和大家共同进步！

    本人也是菜鸟，废话不多说，贴上自己总结摸索的效果、代码如下：

    效果：

<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;
  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>

自己的能力有限，希望尽到了自己的绵薄之力，简单实用！明天接着写.......

您的支持是我最大的动力，如果你觉得还可以，请您给个”推荐“！