使用JavaScript语言实现横向轮播图效果

轮播图，初级，横向buton或者底部数字控制轮播，可以实现自动轮播（注释了，使用的话将其注释消掉），核心知识是数据驱动图像的位移达到效果。今天为大家分享使用JavaScript语言实现横向轮播图效果。

js代码：

/*  * 工厂模式  * */      var Method=(function () {   return {   loadImage:function (arr,callback) {    var img=new Image();    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) {    var elem=document.createElement(type);    if(parent) parent.appendChild(elem);    for(var key in style){    elem.style[key]=style[key];    }    return elem;   }   }  })();

html代码：

                    
   
                       
   
    
1
    
2
    
3
    
4
    
5
   
         
      

以上就是使用JavaScript语言实现横向轮播图效果详细内容，更多请关注wpmee。