How to implement horizontal carousel chart in js

Description:

Carousel chart, primary, horizontal button or bottom digital control carousel, can realize automatic carousel (annotated, if used, uncomment it off), the core knowledge is that the displacement of the data-driven image achieves the effect.

js code:

/*
* 工厂模式
* */
  
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;
 }
 }
})();

(Recommended learning: js tutorial)

html code:

 
 
 


 

 

  
  
  
  
  
 
 

  
1
  
2
  
3
  
4
  
5
 
 
 
 

For more programming related content, please pay attention to the Introduction to Programming column on the php Chinese website!

The above is the detailed content of How to implement horizontal carousel chart in js. For more information, please follow other related articles on the PHP Chinese website!