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;
 }
 }
})();

（推荐学习：js教程）

html代码：

 
 
 


 

 

  
  
  
  
  
 
 

  
1
  
2
  
3
  
4
  
5
 
 
 
 

更多编程相关内容，请关注php中文网编程入门栏目！

以上是js如何实现横向轮播图的详细内容。更多信息请关注PHP中文网其他相关文章！