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;

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>

 

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

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