这是一个轮播图组件,你可以直接下载使用,这里是代码地址,需要传入容器的id
和图片地址,支持Internet Explorer 10+
、Firefox
、Opera
和Chrome
等现代浏览器。
首先看一下如何使用这个组件,用到了font-awesome
图标库,然后调用轮播图的css
,最后是用户自己的css
,用户必须设置容器id
以及容器宽高,否则无法正常显示。生成轮播图时给构造函数传入容器元素,以及图片地址:
|
|
下边我们看下具体实现。首先是轮播图的构造函数:
基本思路就是在构造函数里写入轮播图的实例属性,不同的轮播图具有不同的实例属性,将其共同拥有的方法写成原型属性,完整代码请到github上查看,喜欢的可以顺手给个星。原型对象的基本结构如下所示:
|
|
建立dom
结构的代码如下,根据容器的id
生成后代dom
节点的id
以及class
,然后在css
中使用[attribute$=value]
选择器对不同轮播图使用同样的样式。而在代码中也可以根据其容器id
来区分不同轮播图中的类似元素。因为要支持轮播图宽度自适应,所以采用来百分比设置后代元素宽度。
|
|
创建的结构大体上如图下所示:#id
代表用户定义的容器,生成一个#(id)_container
的包裹元素,宽度是容器宽度的图片张数倍,.(id)_img-item[n]
的宽度和高度都等同于容器,图片在各自的.(id)_img-item[n]
里铺满。给容器定义属性position: relative
,通过设置了绝对定位的#(id)_container
的left
值来实现轮播。
为左右箭头以及下边的小圆点添加事件,在鼠标移入轮播图时停止自动播放,移出时设置自动播放。需要注意的是addEventListener
的第二个参数必须是bind
了this
后的函数。因为调用环境自带的函数会使this
的绑定丢失,如果不清楚this
的指向的话可以看这篇文章。
|
|
切换图片的基本思路就是改变实例属性中的当前页这个变量,然后根据这个变量的值对包裹元素进行定位,再使对应的小圆点变色。下边是点击左箭头触发的函数,判断如果处于边缘就跳到最后。点击右箭头和下边圆点的事件与之类似。
|
|
最后给轮播图添加自动播放功能,即利用定时器每3
秒触发一次右箭头的点击事件。将返回的定时器保存到实例属性中,以便在鼠标悬停的时候停止自动轮播。
|
|
到这轮播图组件就算写好了,这可以让我们少写很多代码,而且可以在一个页面中多次使用,不会污染到全局变量。缺陷在于这时的轮播图还不能支持10
张以上的图片,因为考虑到这种需求并不是很多,就没有写10
张以上的判断条件,有需要时可以自行添加。可以点击这里预览最终效果,如果对于这篇博客有什么建议或想法,欢迎到下方留言。