轮播图--文字上下方向自动滑动

• 首先html+css布局

html

<div class="weather-info">
   <ul>
   <li>Shandong ZiBo</li>
   <li>cloud</li>
   <li>80ºF</li>
   <li>15Km/h</li>
   </ul> 
</div>        

css

.weather-info{ width: 300px; height: 40px； overflow: hidden; background-color:red; }
 li{ height: 30px; list-style: none; line-height: 30px; font-size: 15px; color: #ffffff; font-family:Arial; overflow: hidden; }

1.不要在ul上设置高度，而是外边的div—方便隐藏li，保证每次动画只有一个li出现\
2.将li标签的高度调节的稍微比div的高度小一点–保证动画的美观

• Jquery

function weather(obj) {
        $(obj).find("ul").animate({
            marginTop:"-30px",
        },1000,function () {
            $(this).css({marginTop:'0.1px'}).find("li:first").appendTo(this);
        })
    }
    $(function () {
        var num=$(".weather-info").find('li').length;
        if(num>1){
            setInterval('weather(".Info-weather")',2000)
        }
    })

1.第一个函数定义轮播动画
2.第二个函数定义计时器，并引用动画
3.animate:首先执行‘marginTop:”-30px”’，将ul向上移动30px，过程为1s时间，动画执行完之后执行函数，讲ul移动回原处，并且将已经上去的第一个li标签放到最后一个

1. Jquery中的animate方法
   只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。
   (selector).animate({styles},speed,easing,callback)