JS实现横向轮播图（初级版）

本文实例为大家分享了JS实现横向轮播图的具体代码，供大家参考，具体内容如下

描述：

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

效果：

代码：

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
 
 
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。