Javascript原生轮播图展示

今天一位群友遇到了一点小问题,具体问题也记不大清楚了,大概就是轮播图宽度方面的问题,趁着略微有空的时候,把源代码接收过来,然后开始解决这个问题,大概看了一下整体的代码结果,完全对不上我的思路有木有,轮播图片区域和下部控制按钮完全是分离的有木有,既然作为一部分的内容竟然不放到同一块……

最后决定还是重写一个轮播图吧,因为并不需要动画效果之类的,直接用js元素 display block|none 控制就够了,所以也不是特别麻烦,也算是重新温习提升了一遍html/css/js的熟练程度吧。

整个结构基本上适应任何屏幕尺寸,在轮播图方面,博主还是建议各位使用css的background,使用img标签的话,在不同的窗口尺寸就很容易体验出问题了,当然,如果网站wap和web结构是分开的,那这样写也没有什么大问题,毕竟除了代码质量,第二重要的就是写代码的效率了。

源代码很简单,有兴趣的可以下载学习一下~

效果演示地址

演示地址

源码打包下载

迅雷下载
普通下载