使用JavaScript实现广告图片自动切换

重构首页广告层的HTML代码

广告层的HTML代码如下:

  

往广告层里面添加图片

添加广告图片的JavaScript代码如下:

     

引入Swiper的CSS框架

代码如下:


引入Swiper的JS框架

代码如下:


初始化Swiper

autoplay设置为true表示自动切换(默认间隔时长为3秒)。
初始化滑块的JS代码如下:

      

测试数据

使用数组保存用于测试的广告图片。
data.js文件的代码如下:

var images=["img/20180907001.jpg","img/20180912002.jpg","img/20180912003.jpg"];

引入该JS文件,代码如下:


使用浏览器浏览


swiper0912_03.gif

附上完整代码

代码如下:














  
  

参考资料

https://www.swiper.com.cn/usage/index.html
http://www.cnblogs.com/darkchii/p/7464579.html

你可能感兴趣的:(使用JavaScript实现广告图片自动切换)