图片轮播在网页中是一个比较常用到的一个功能,今天将用最简单的代码实现一个简单的轮播效果,当然实际运用中不可能像这个这么简单,这里呢只做效果展示,希望大家发挥更多的想象可以做的更好。
思路分析:首先在网页中的相应位置先插入一个空的图片(即不填src属性),然后在JS代码中用获取到的图片地址(这里用一个数组存储模拟的一个数据)赋给空的<img>的src属性,然后每隔指定时间再去替换掉之前的<img>元素的src属性,以此便达到了图片轮播效果。
参考代码如下:
注意:这里如果在获取图片地址的时候,取到最后一张图片地址时需要在下次回到第一张图片地址,所以在上面的代码中当i==imgNum.length时需执行i = 0操作,从而保证了下次返回第一张图片。
实际效果:
对前端感兴趣的小伙伴记得关注小编,每天都会更新前端的一些小技巧。没点赞的小伙伴记得点赞收藏哦,谢谢大家!