JS实现横向轮播图(初级版)
本文实例为大家分享了JS实现横向轮播图的具体代码,供大家参考,具体内容如下
描述:
轮播图,初级,横向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的位移达到效果。
效果:
代码:
js文件:
/* *工厂模式 **/ varMethod=(function(){ return{ loadImage:function(arr,callback){ varimg=newImage(); img.arr=arr; img.list=[]; img.num=0; img.callback=callback; //如果DOM对象下的事件侦听没有被删除掉,将会常驻堆中 //一旦触发了这个事件需要的条件,就会继续执行事件函数 img.addEventListener("load",this.loadHandler); img.self=this; img.src=arr[img.num]; }, loadHandler:function(e){ this.list.push(this.cloneNode(false)); this.num++; if(this.num>this.arr.length-1){ this.removeEventListener("load",this.self.loadHandler); this.callback(this.list); return; } this.src=this.arr[this.num]; }, $c:function(type,parent,style){ varelem=document.createElement(type); if(parent)parent.appendChild(elem); for(varkeyinstyle){ elem.style[key]=style[key]; } returnelem; } } })();
html文件:
Title
- 1
- 2
- 3
- 4
- 5