JSで水平カルーセルグラフを実装する方法

王林
リリース: 2020-03-06 10:51:33
転載
2652 人が閲覧しました

JSで水平カルーセルグラフを実装する方法

説明:

カルーセル チャート、プライマリ、水平ボタン、または下部のデジタル コントロール カルーセルは、コアである自動カルーセル (注釈付き、使用されている場合はコメントを解除します) を実現できます。データ駆動型の画像を置き換えることで効果が得られることがわかっています。

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 コード:




 
 Title
 

ログイン後にコピー

その他のプログラミング関連コンテンツについては、php 中国語 Web サイトの プログラミング入門 コラムにご注目ください。

以上がJSで水平カルーセルグラフを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:jb51.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!