html5自动滚动图片,html5 ul自动滚动jQuery实现

目录

效果

jQuery代码

效果

地址

jQuery代码

$(document).ready(function(){

var marginTop =0;

var bool=false;

// 判断有多少个li

var lengli = $("#notice li").length -2;

setInterval(function(){

if(bool) return;//判断运行和停止

$(".web-notice li:first").animate({marginTop:marginTop--},10,function(){

if(!($(this).is(":animated"))) { //判断是否有一个动画节点

if ((-marginTop) >= $(this).height()*lengli) { //判断移出位置是否超过高度

$(this).css("margin", "0");

$(this).appendTo($(".text")); //把第一个节点移到ul后面

marginTop = 0; //重新设置移动数值

}

}

});

},100);

$(".web-notice").mouseover(function(){ //li鼠标移入，停止移动

bool=true;

});

$(".web-notice").mouseout(function(){

bool=false;

});

});