轮播系列之上下标题式轮播

公司最近项目又多了起来，改版的改版，更新的更新，迭代的迭代，团队内部气氛也紧张了起来。由于项目排期紧，大家也都争分夺秒的干，在这里，小小的提醒自己一下：注意自己的身体。

项目中有一个标题上线轮播的小效果，以前见得多，心里也有小小的思路，现在项目遇到了，就实际动手干一干。废话不多说先看设计效果，类似于淘宝和京东上首页标题上下轮播。

就是上面这个头条新闻右侧的轮播。

废话还是不多说，再上代码。（代码写的简化了些，方便看懂,当然你可以直接引用，只不过就是样式的区别了）

<!--HTML-->
        
        <div class="box" id="box">
            <ul id="list">
                <li><a href="">1.这是第一条新闻</a></li>
                <li><a href="">2.这是第二条新闻</a></li>
                <li><a href="">3.这是第三条新闻</a></li>
                <li><a href="">4.这是第四条新闻</a></li>
                <li><a href="">5.这是第五条新闻</a></li>
                <li><a href="">6.这是第二条新闻</a></li>
                <li><a href="">7.这是第三条新闻</a></li>
                <li><a href="">8.这是第四条新闻</a></li>
                <li><a href="">9.这是第五条新闻</a></li>
            </ul>
        </div>

/*css*/
            *{margin:0;padding:0;}
            ul{list-style:none;}
            .box{
                width:200px;
                height:30px;
                background-color:#f1f1f1;
                margin:100px auto;
                overflow: hidden;
            }
            .box ul li{
                height:30px;
                text-align:center;
                line-height:30px;
            }

/*javascript*/
            function getStyle(element,attr){
                if(element.currentStyle){
                    return element.currentStyle[attr];
                }else{
                    return getComputedStyle(element,false)[attr];
                }
            }
            
            var scroll = {
                mt:0,  //初始移动距离
                moveDuration:30,  //移动间隔
                stopDuration:4000, //停止间隔
                init:function(){   
                    var list = document.getElementById("list"),
                          li = list.getElementsByTagName("li")[0],
                         firstLi = list.children[0].cloneNode(true),
                         liHeight = parseInt(getStyle(li ,"height")),  
                         liLen = list.children.length, 
                         mtTotal = liHeight*liLen;
                    list.appendChild(firstLi)
                    setInterval(function(){
                        var timer = setInterval(function(){
                            scroll.mt-=1;
                            if(scroll.mt == -mtTotal){
                                scroll.mt = 0;
                            }
                            list.style.marginTop = scroll.mt+"px";
                            if(scroll.mt%liHeight == 0){
                                clearInterval(timer);
                            }
                        },scroll.moveDuration)
                    },scroll.stopDuration)
                }
            }
            
            window.onload = function(){
                scroll.init()
            }

getStyle()这是自己封装的一个函数，用于获取元素非行间样式，做了一点兼容性调整。

moveDuration：这个字段用于控制一次轮播滚动的速度

stopDuration：这个字段用于控制一轮播滚动间隔的时间。

简单写了写，当然项目中如果实际应用，如果考虑到性能的话，还需要做一些性能上的优化。不过，应对一般情况，显然是够用了。