公告向左慢慢滚动
$(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