/ *
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を返します。
}