似月是你
God helps those who help themselves.
天 道 酬 勤

公告向左慢慢滚动

$(function(){ 
    var timer = setInterval(autoplay,50); 
    var leftnow = parseFloat($(".box_div ul").css("left")); 
    var size = $(".box_div>ul").children().length;
    for(var i=0;i<size;i++){ 
        $(".box_div>ul").append($(".box_div>ul>li").eq(i).clone());
    }
    
    function autoplay(){ 
        var size = $('.box_div ul').find('li').length;
        var widths = size*381;
        $(".box_div ul").css("width",widths+"px");
        var leftnow = parseFloat($(".box_div ul").css("left")); 
        leftnow--; 
        $(".box_div ul").css({"left":leftnow+"px"}); 
        for(var i=0;i<size;i++){
            if(leftnow==i*-380){
                $(".box_div ul").find("li:first").appendTo($(".box_div ul"));
                $(".box_div ul").css({"left":"0px"});
            }
        }
    } 
    $(".box_div").mouseenter(function(){ 
        clearInterval(timer); 
    }); 
    $(".box_div").mouseleave(function(){ 
        timer = setInterval(autoplay,50); 
    }); 
});

 html部分

<div class="box_div">
    <ul>
        <li>公告内容</li>
    </ul 
</div

 

posted @ 2020-08-29 14:49  似月是你  阅读(156)  评论(0编辑  收藏  举报