js实现图片轮播效果

感觉这一周学的东西中,本菜鸡觉得轮播效果是最炫酷的哈哈哈。

要好好的纪念下这个东西,以后忘了再来这边看看!超赞,

当自己做出这个效果的时候,很有成就感的(ノω<。)ノ))☆.。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
192px;
height: 120px;
border: 1px solid gray;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#div1 img{
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
<img src="images/1.jpg" alt="" width="192"/>
<img src="images/3.jpg" alt="" width="192"/>
<img src="images/4.jpg" alt="" width="192"/>
</div>
<div id="div2">

</div>
<script>
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var imgs=div1.getElementsByTagName("img");

window.onload=function(){
for(var i=0;i<imgs.length;i++){
imgs[i].style.left=i*192+"px";
}
};

function imgMove(){
div2.innerHTML="";
var b1=false;
for(var i=0;i<imgs.length;i++){
imgs[i].style.left=imgs[i].offsetLeft-1+"px";
if(imgs[i].offsetLeft==0){
b1=true;
if(i==0){
imgs[imgs.length-1].style.left="384px";
}
else{
imgs[i-1].style.left="384px";
}
}
}
if(!b1){
setTimeout(imgMove,1);
}
else{
setTimeout(imgMove,3000);
}
}
//开始调用
setTimeout(imgMove,200);
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/zhubaixue/p/6539262.html