图片轮播

Posted 2020-08-14 2350305682

方法一、原生js，这种方法效果比较好

html，设置最外围的div宽高为一次要展示的图片的总宽高，设置相对定位；内层div宽度为外层div宽度的2倍，高度与外层div一样，设置绝对定位。

window.onload=function(){
var oDemo=document.getElementById("demo");
var odemo1=document.getElementById("demo1");
var aDl=odemo1.getElementsByTagName("dl");
var timer=null;
var iSpeed=-5;
odemo1.innerHTML+=odemo1.innerHTML;（用js复制图片为原来的两倍）
odemo1.style.width=aDl[0].offsetWidth*aDl.length+"px";（此时，内层div的宽度为所有图片宽度相加，让它们在同一行显示）
timer=setInterval(function(){
odemo1.style.left=odemo1.offsetLeft+iSpeed+"px";
if(odemo1.offsetLeft<-odemo1.offsetWidth/2){（如果运动到内层div宽度的一般就把它拉回到原来的位置）
odemo1.style.left="0px";
}
},200);
odemo1.onmouseover=function(){
clearInterval(timer);
}
odemo1.onmouseout=function(){
timer=setInterval(function(){
odemo1.style.left=odemo1.offsetLeft+iSpeed+"px";
if(odemo1.offsetLeft<-odemo1.offsetWidth/2){
odemo1.style.left="0px";
}
},200);
}
}

方法二、jQuery，animate方法（每隔两秒就把第一个图片移到最后）

$(function(){
setInterval(function(){

$("ul").animate({"marginTop":-70},3000,function(){
$(this).css("marginTop",0).find("li:first").appendTo(this);
});
},2000);
});

方法三，这种方法是使图片来回滑动

$(function(){
var index=0;
setInterval(slide,2000);
function slide(){
index++;
if(index==2){
$("ul").css("left",0);
index=0;
}else{
$("ul").animate({"left":"-=160px"},1000);
}
}
});