用js实现图片的轮转
用js实现图片的轮转
乱世中的单纯 发表于2年前
用js实现图片的轮转
  • 发表于 2年前
  • 阅读 48
  • 收藏 4
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

<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>的内容。这里的小图片是为了实现相对位移和固定位移的效果。

共有 人打赏支持
粉丝 10
博文 59
码字总数 32739
×
乱世中的单纯
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: