文字小轮播

Posted 2020-11-06 程序猿小霞子https://blog-static.cnbl

<div class="serch2_lb">
        <ul id="ser_xlb" id="ser_xlb">
            <li><a href="#">女子三米板夺金银</a></li>
            <li><a href="#">罗切特遭持枪抢劫</a></li>
            <li><a href="#">少林寺办传灯大典</a></li>
            <li><a href="#">周杰伦青蜂车败诉</a></li>
            <li><a href="#">南京男孩咸猪手</a></li>
            <li><a href="#">夫妻生活奇葩公证</a></li>
            <li><a href="#">菲律宾总统拒道歉</a></li>
            <li><a href="#">石川佳纯赞马龙</a></li>
            <li><a href="#">刘嘉玲讽谢娜</a></li>
            <li><a href="#">周海媚与男友分手</a></li>
            <li><a href="#">女子三米板夺金银</a></li>
        </ul>
    </div>

js部分

var ser_xlb=document.getElementById(‘ser_xlb‘);
    var nowPosition;
    var num=1;
    setInterval(function(){
        bbo();
    },1000)

    function bbo(){
        if (num==10){
            $(ser_xlb).animate({"marginLeft": ((-num) * 154) + "px"},"slow",function(){
                ser_xlb.style.marginLeft=0;
                num=1;
            });
        }else{
            $(ser_xlb).animate({"marginLeft": ((-num) * 154) + "px"});
        num++;
        }
        
    }

css

*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
.serch2_lb{
    width: 154px;
    height: 16px;
    background: #C1D8F0;
    line-height: 16px;
    overflow: hidden;
    position: relative;
    margin-top: 1px;
    display: inline-block;
    /*_top:0;
    _left:0;*/
}
#ser_xlb{
    width: 1694px;
    height: 16px;
}
#ser_xlb li{
    float: left;
    width: 154px;
    height: 16px;
    overflow: hidden;

}
#ser_xlb li a{
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    vertical-align: baseline;
    display: inline-block;
    width: 154px;
    /*overflow: hidden;*/
}