<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スタイル>
* {
マージン：0;
パディング：0;
}
.hezi {
幅：500pxなど。
高さ：300ピクセル;
パディング：10pxの;
マージン：100pxに自動;
位置：相対;
}
#tupian {
幅：500pxなど。
高さ：300ピクセル;
位置：相対;
オーバーフロー：隠されました;
}
{
幅：500pxなど。
高さ：300ピクセル;
位置：絶対;
}
#tupianのULのLi {
リストスタイル：なし。
位置：絶対;
左：0;
トップ：0;
不透明度：0;
トランジション：すべての0.8秒。
}
.btnBox {
幅：500pxなど。
高さ：は50px;
位置：絶対;
左：10pxの;
トップ：75px;
}
#leftBtn {
位置：絶対;
左：0;
トップ：0;
幅：25ピクセル;
高さ：は50px;
背景色：#CCC;
テキスト整列：センター;
行の高さ：は50px;
フォントサイズ：は50px;
フォントファミリ： "のTimes New Roman";
色：#FFF;
テキスト装飾：なし;
}
#rightBtn {
位置：絶対;
右：0;
トップ：0;
幅：25ピクセル;
高さ：は50px;
背景色：#CCC;
テキスト整列：センター;
行の高さ：は50px;
フォントファミリ： "のTimes New Roman";
フォントサイズ：は50px;
色：#FFF;
テキスト装飾：なし;
}
#tupianオール{
幅：125px;
高さ：15ピクセル;
位置：絶対;
Zインデックス：100;
右：10pxの;
下：5pxの;
}
#tupianオールリチウム{
幅：10pxの;
高さ：10pxの;
パディング：5pxの;
背景色：#FFF;
テキスト整列：センター;
行の高さ：10pxの;
リストスタイル：なし。
マージン右：5pxの;
フロート：左;
}
#tupianオールli.cur {
背景色：黄色;
}
</スタイル>
</ head>の
<身体>
<DIV CLASS = "hezi" ID = "hezi">
<DIV ID = "tupian">
<UL>
<LIスタイル= "不透明度：1;"> <IMG SRC = "IMG / 1.JPG" ALT = ""> </ LI>
<LI> <IMGのSRC = "IMG / 2.JPG" ALT = ""> </ LI>
<LI> <IMGのSRC = "IMG / 3.JPG" ALT = ""> </ LI>
<LI> <IMGのSRC = "IMG / 4.JPG" ALT = ""> </ LI>
<LI> <IMGのSRC = "IMG / 5.jpg" ALT = ""> </ LI>
</ UL>
<OL>
<LIクラス= "CUR"> 1 </ LI>
<LI> 2 </ LI>
<LI> 3 </ LI>
<LI> 4 </ LI>
<LI> 5 </ LI>
</ OL>
</ div>
<DIV CLASS = "btnBox">
<HREF = "javascriptの：無効（0）;" ID = "leftBtn">
<< / A> <のhref = "javascriptの:;" ID = "rightBtn" >>
</a>の
</ div>
</ div>
</ BODY>
<スクリプト>
関数Zhuanzhaun（bigEle、smilEle、L、R）{
this.hezi =のdocument.getElementById（bigEle）。
this.tupian =のdocument.getElementById（smilEle）。
this.ul = tupian.children [0]。
this.ulLiArr = this.ul.children。
this.ol = tupian.children [1]。
this.olLiArr = this.ol.children。
this.leftBtn =のdocument.getElementById（L）。
this.rightBtn =のdocument.getElementById（R）
this.k = 0;
this.timer = NULL;
this.init（）;
}
Zhuanzhaun.prototype = {
INIT：関数（）{
this.autoplay（）;
this.bindRClick（）;
this.bindOver（）;
this.dianji（）;
this.bindEnter（）;
this.bindOut（）;
}、
自動再生：関数（）{
this.timer =たsetInterval（（）=> {
this.autostep（）;
}、2000）
}、
オートステップ：関数（）{
this.k ++;
（this.k> 4）{もし
this.k = 0;
}
{（; iはthis.ulLiArr.lengthを<I ++がVAR I = 0）のための
this.ulLiArr [I] .style.opacity = 0。
this.olLiArr [I] .className = "";
}
this.ulLiArr = 1 [this.k] .style.opacity。
this.olLiArr [this.k] .className = "CUR"。
}、
ボリュームENTER：関数（）{
この= VAR。
this.hezi.onmouseenter =関数（）{
clearInterval（that.timer）。
}
}、
bindOut：関数（）{
この= VAR。
this.hezi.onmouseleave =関数（）{
that.autoplay（）;
}
}、
autostep1：関数（）{
するvar _this =この;
this.k--;
IF（this.k <0）{
this.k = 4。
}
{（; iは_this.ulLiArr.lengthを<I ++がVAR I = 0）のための
_this.ulLiArr [I] .style.opacity = 0。
_this.olLiArr [I] .className = "";
}
_this.ulLiArr [this.k] .style.opacity = 1。
_this.olLiArr [this.k] .className = "CUR"。
}、
dianji：関数（）{
これを= VAR
this.leftBtn.onclick =関数（）{
that.autostep1（）;
}
}、
bindClick：関数（）{
この= VAR。
this.leftBtn.onclick =関数（）{
that.k--;
that.autostep（）;
IF（that.k <0）{
that.k = 4。
}
{（; iはthat.ulLiArr.lengthを<I ++がVAR I = 0）のための
that.ulLiArr [I] .style.opacity = 0。
that.olLiArr [I] .className = "";
}
that.ulLiArr [that.k] .style.opacity = 1。
that.olLiArrは[that.k] .className = "CUR"。
}
}、
bindRClick：関数（）{
この= VAR。
this.rightBtn.onclick =関数（）{
that.autostep（）;
}
}、
bindOver：関数（）{
この= VAR。
{（; iはthis.olLiArr.lengthを<I ++がVAR I = 0）のための
this.olLiArr [i]は.onmouseover =関数（）{
{（J ++; J <that.olLiArr.length VAR J = 0）のための
that.olLiArr [J] .className = "";
that.ulLiArr [J] .style.opacity = 0。
IF（この== that.olLiArr [J]）{
that.k = J;
that.ulLiArr [that.k] .style.opacity = 1。
this.className = "CUR"。
}
}
}
}
}
}
新しいZhuanzhaun（ "hezi"、 "tupian"、 "leftBtn"、 "rightBtn"）;
</ SCRIPT>
</ HTML>