<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>タイトル</ TITLE>
<スクリプトSRC = "../ move.js"> </スクリプト>
<スタイル>
.banner {幅：1000px;高さ：300ピクセル;マージン：20ピクセル、オート;位置：相対;オーバーフロー：隠さ}
.imgbox {位置：絶対;左： 0 。
高さ：300ピクセル;}
.imgboxのIMG {幅：1000px;高さ：300ピクセル。フロート：左;}
.btns入力{位置：絶対;トップ：130px;幅：40ピクセル、高さ40ピクセル;ボーダー：なし;背景：RGBA（ 200,200,200,0.5 ）;}
#left {左：</スタイル>
</ HEAD>
<BODY>
<DIV CLASS = "バナー">
<DIV CLASS = "IMGBOX">
<IMG SRC = "IMG / 1.JPG" ALT = "">
<IMGのSRC = "IMG / 2.JPG "ALT = "">
<IMGのSRC = "IMG / 3.JPG" ALT = "">
<IMGのSRC = "IMG / 4.JPG" ALT = "">
<IMGのSRC =" IMG / 5。 JPG」ALT = "">
<！ - 。W1复制第一张图片在最后、做过渡用- >
<IMGのSRC = "IMG / 1.JPG" ALT = "">
</ div>
<divのクラス= "btns">
の<input type = "ボタン" ID = "左"値= "<<<">
<入力タイプ= "ボタン" ID = "右"値= ">>>">
</ div>
</ div>
</ body>
<スクリプト> 関数バナー（）{
この .LEFT = document.querySelector（ "＃左"
）
この .RIGHT = document.querySelector（ "＃権が" ）
これは .imgs = document.querySelectorAll（ "IMGBOX IMG。" ）;
この .imgbox = document.querySelector（ "IMGBOX" ）
この .imgbox.style.widthは= この .imgs.lengthは* これは [0] .offsetWidth + "PX"を.imgs 。
この .INDEX = 0 ;
この.INIT（）
}
Banner.prototype.init = 関数（）{
VAR = この;
この .right.onclick = 機能（）{
that.changeIndex1（）;
}
この .left.onclick = 関数（）{
that.changeIndex2（）;
};
}
Banner.prototype.changeIndex1 = 関数（）{
IF（この .INDEX === 本 .imgs.length- 1 ）{
// 前回のW2場合裏面第二実画像、インデックスインデックス1。
この .INDEX = 1 ;
// W3インデックスセット後、左IMGBOX左の初期値。 ：0
// 移動は左からなる：width1000 0 *は-index1来た
この .imgbox.style.left = 0
}
他に{
この .INDEX ++ ;
}
この.display（）;
};
Banner.prototype.changeIndex2 = 関数（）{
IF（この .INDEXが== 0 ）{
// 最初のバック引用した最後から二番目の写真インデックス2ビット長
この .INDEX = この .imgs.length-2 ;
// インデックスセットした後、初期値は左-5000px（最後の図に示されている、すなわち、左の値）に設定されています。
// 移動は-index -5000 * 1000から来る
この（ - .imgbox.style.left = 本 * 1 .imgs.length-を。）この .imgs [0] + .offsetWidth "PX"
// console.log（ - （this.imgs.length-1）* this.imgs [0] .offsetWidth）
}
他{
この .index--
}
この.display（）
}。
Banner.prototype.display = 関数（）{
ムーブ（この.imgbox、{
左： - これは .imgs [0] .offsetWidth *（この.INDEX）
}）
}。
新しいバナー（）
</スクリプト>
</ HTML>
初心者モード
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0">
<メタHTTP-当量= "X-UA-互換"コンテンツ= "IE =縁">
<タイトル>ドキュメント</タイトル>
<スタイル>
.banner {幅：1000px;高さ：300ピクセル;マージン：20ピクセル、オート;位置：相対;オーバーフロー：隠された;}
.imgbox {位置：絶対;左：0;}
.imgbox IMG {幅：1000px;高さ：300ピクセル;フロート：左;}
.btns入力{位置：絶対;トップ：130px;幅：40ピクセル;高さ：40ピクセル;ボーダー：なし;背景：RGBA（200,200,200,0.5）;}
#left {左：0}
#right {右：0}
</スタイル>
</ HEAD>
<BODY>
<DIV CLASS = "バナー">
<DIV CLASS = "IMGBOX">
<IMG SRC = "IMG / 1.JPG" ALT = "">
<IMGのSRC = "IMG / 2.JPG" ALT = "">
<IMG SRC = "IMG / 3.JPG" ALT = "">
<IMG SRC = "IMG / 4.JPG" ALT = "">
<IMGのSRC = "IMG / 5.jpg" ALT = "">
<！ - W1复制第一张图片在最后、做过渡用- >
<IMGのSRC = "IMG / 1.JPG" ALT = "">
</ div>
<DIV CLASS = "btns">
の<input type = "ボタン"ID ="左」値= "<<<">
<入力タイプ= "ボタン" ID = "右"値= ">>>">
</ div>
</ div>
</ body>
<スクリプトSRC = "../ move.js"> </ SCRIPT>
<SCRIPT >
// OOA：
// OOD：
// OOP：
関数バナー（）{
this.left =のdocument.getElementById（ "左"）
this.right =のdocument.getElementById（ "右"）
this.imgbox = document.querySelector（ "IMGBOX"）
this.img = this.imgbox.children;
this.imgbox.style.width = this.img.length * this.img [0] .offsetWidth + "PX"。
this.index = 0;
this.init（）
}
Banner.prototype.init =関数（）{
この= VAR。
this.left.onclick =関数（）{
that.changeIndex（1）
}
this.right.onclick =関数（）{
こと。
=機能Banner.prototype.changeIndex（タイプ）{
IF（タイプ== 1）{
IF（this.index == 0）{
this.index = this.img.length-2;
this.imgbox.style.left = - （-this.img.length 1）* this.img [0] + .offsetWidth "PX";
}他{
this.index--;
}
} {他
（this.index 1 IF - == this.img.length。 ）{
//ときに最後のインデックスのW2、バック実画像への第2の、インデックス1。
this.index = 1;
次いで// W3インデックスセット、左初期値に設定され、左IMGBOXに.: 0
//移動し、左からである：*来るwidth1000 -index1 0
this.imgbox.style.left = 0;
}そうでなければ{
this.index ++
}
}
this.display（）。
}
Banner.prototype.display =関数（）{
ムーブ（this.imgbox、{
左：-this.index * this.img [0] .offsetWidth
}）
}
新しいバナー（）。
</スクリプト>
</ HTML>