用js实现图片的轮转

原创
2015/12/12 12:39
阅读数 249
<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>的内容。这里的小图片是为了实现相对位移和固定位移的效果。

展开阅读全文
打赏
0
4 收藏
分享
加载中
更多评论
打赏
0 评论
4 收藏
0
分享
在线直播报名
返回顶部
顶部