カルーセルを達成jsES6

/ *
1.完了ページコンテンツ
左ボタンまたがる
右ボタンスパンを
テキストのdiv置くために
OLの

2. [ローテーションの設定(現在の添字indexAカルーセルを制御)
1.画像:表示を実行
背景:2.ドット
3.テキストを
3.イベントの追加
1. indexAの左ボタンをクリックして-
indexAの2 ++右ボタンをクリックし
indexAのMouseEnterの=指数3つのドット
4が自動的に回転し
たsetInterval
* /
クラススライダー{
コンストラクタ(ID){
//例のプロパティを
//回転大きな箱
this.bigBox ID = $(ID);
//すべてのli ulの取得
this.ullis this.bigBox.children = [0] .childrenを;
//大きな画像の数を取得
this.numを=この.ullis.length;
//内のすべてのオール李を作成してもらう
this.ollis = this.createEle();
//現在のインデックスカルーセル画像を設定します
= 0 this.indexA;
//テキストメッセージのdiv得る
;上記のid = $( 'MSG')に述べたthis.div
//カルーセルメソッド呼び出し
(this.slideを);
//左ボタンを取得
'(this.ltBtn = $ IDをltBtn ');
//は、右のボタンを取得
上記のid = $(言及this.rtBtn'; rtBtnを「)
//コールのイベント追加
this.addEventを();
//タイマー
this.timer =ヌル;
//自動カルーセルを呼び出します
this.autoPlay();
}
//プロトタイピング
//作成ページ要素
createEle(){
//左ボタンまたがる
レットは= $( 'スパン')を作成しますleftSpan;
leftSpan.innerHTML = '<';
leftSpan.id =「ltBtn ';
this.bigBox.appendChild(leftSpan);
//右ボタンがまたがる
レットが= $作成rightSpan('スパン');
rightSpan.innerHTML ='>「;
rightSpan.id= 'rtBtn';
this.bigBox.appendChild(rightSpan)。
//放文字的には、DIV
DIV = $( 'DIV')を作成してみましょう。
div.id = 'MSG';
this.bigBox.appendChild(DIV)。
//オール
ましょうARR = [];
オール= $(「オール」)を作成してみましょう。
//李
{(;; I <this.num私は++ i = 0を聞かせて)用
リチウム= $は( '李')を作成してみましょう。
ol.appendChild(LI)。
arr.push(LI)。
}
this.bigBox.appendChild(OL)。
ARRを返します。
}
//设置轮播
スライド(){
//图片
(LET I = 0; I <this.num; iは++){ため
this.ullis [I] .style.display = 'なし';
}
this.ullis [this.indexA] .style.display = 'ブロック'。
//圆点
{(; I <this.num I ++は、I = 0せて)ため
this.ollis [I] .style.backgroundColor = '赤'。
}
this.ollis [this.indexA] .style.backgroundColor = '青'。
//文字
this.div.innerHTML = this.ullis [this.indexA] .firstElementChild.firstElementChild.alt。
}
//添加事件
addEvent(){

	//左 点
	this.ltBtn.onclick = ()=>{
		this.indexA --;
		if(this.indexA === -1){
			this.indexA = this.num - 1;
		}
		//调用轮播
		this.slide();
	}
	//右  点
	this.rtBtn.onclick = ()=>{
		this.indexA ++;
		if(this.indexA === this.num){
			this.indexA = 0;
		}
		this.slide();
	}
	//小圆点  移入
	for(let i = 0;i < this.num;i ++){
		
		this.ollis[i].onmouseenter = ()=>{
			this.indexA = i;
			this.slide();
		}
	}
}
//自动轮播
autoPlay(){

	this.timer = setInterval(()=>{
		this.indexA ++;
		if(this.indexA === this.num){
			this.indexA = 0;
		}
		this.slide();
	},3000)
	//给大盒子添加移入事件
	this.bigBox.onmouseenter = ()=>{
		clearInterval(this.timer);
	}
	//给大盒子添加移出事件
	this.bigBox.onmouseleave = ()=>{
		this.autoPlay();
	}
}

}
//工具箱
関数$ ID(ID){
のdocument.getElementById(ID)を返します。
}
関数は、$ {(tagNameを)を作成する
(tagNameを)のdocument.createElementを返します。
}

おすすめ

転載: blog.csdn.net/weixin_45052104/article/details/91431136
おすすめ