图片轮播在网页中是一个比较常用到的一个功能,今天将用最简单的代码实现一个简单的轮播效果,当然实际运用中不可能像这个这么简单,这里呢只做效果展示,希望大家发挥更多的想象可以做的更好。
思路分析:首先在网页中的相应位置先插入一个空的图片(即不填src属性),然后在JS代码中用获取到的图片地址(这里用一个数组存储模拟的一个数据)赋给空的<img>的src属性,然后每隔指定时间再去替换掉之前的<img>元素的src属性,以此便达到了图片轮播效果。
参考代码如下:
注意:这里如果在获取图片地址的时候,取到最后一张图片地址时需要在下次回到第一张图片地址,所以在上面的代码中当i==imgNum.length时需执行i = 0操作,从而保证了下次返回第一张图片。
实际效果:
声明:本文由网站用户竹子发表,超梦电商平台仅提供信息存储服务,版权归原作者所有。若发现本站文章存在版权问题,如发现文章、图片等侵权行为,请联系我们删除。