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

• 首先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)