html鼠标放上去轮播暂停,jQuery：无焦点轮播图，鼠标经过停止，移开继续

首先每个图片的宽度都是100%，高度500px，一共4个图片。

4个图片外层div，id="imgs",宽度=100%*4，高度500px。

imgs外层有一个div，id="show",宽度是一张图片的宽度100%，height=500px。

#show{

width: 100%;

height: 500px;

position: relative;

border: 1px solid #d9d919;

overflow: hidden;

}

#imgs{

width: 400%;

height: 500px;

position: relative;

left: 0;

}

#imgs>img{

width: 100%;

height: 500px;

float: left;

}

注意：imgs的css设置必须有position，否则后面jquery设置动画没有办法设置left的值。

jquery代码：

i=setInterval(scrolls,2000);

function scrolls(){

$("#imgs").animate({"left":"-100%"},1000,function(){

$(this).append($(this).children("img:first"));//将第一张图片移到最后一张

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

});

}

$("#show").mouseenter(function(){

clearInterval(i);

})

$("#show").mouseleave(function(){

scrolls();

})