用js实现图片的轮转

2019独角兽企业重金招聘Python工程师标准>>>

<div id="bg" style="position:relative"> <img id="pic" height="768" width="1024" alt="">
<div id="boy" style="position:absolute;left:0;bottom:0"><img src="3.jpg" alt="" width="100" height="100"></div></div>
<script>
 
var arr=new Array();
arr[0]="1.jpg";//放图片地址
arr[1]="2.jpg";
var num=0;
setInterval(turnpic,2000); //每隔2秒转换图片
 function turnpic(){
   idsrc=document.getElementById("pic");
   if(num==arr.length-1)
        num=0;
   else
        num+=1;
   idsrc.src=arr[num];
}
 
</script>

实现效果：（后面的大图片是由两张图片轮流转换，前面的小图片则固定不动）

如果只要轮转效果，而不要前面的小图片，可以去掉<div id="boy"></div>的内容。这里的小图片是为了实现相对位移和固定位移的效果。

转载于:https://my.oschina.net/zhangxuman/blog/543093