注CSS +本体部分はIMG親を配置しました
<スタイル>
* {
マージン： 0 ;
パディング： 0 ;
}
UL {リチウム
リスト - スタイル：なし;
}
#box {
高さ：260px;
幅：500pxなど;
マージン：オートは50px;
位置：相対;
オーバーフロー：隠されました;
}
/ * 西安提供されない、ここで親のimg幅* /
/ * の数に応じて、次の画像を* /
#box divの{
位置：絶対。
トップ： 0 ;
左：
トップ：105px; 0 ;
}
#box DIV IMG {
幅：500pxなど。
高さ：260px;
フロート：左;
}
.but .RIGHT {
高さ：は50px。
幅：は50px;
位置：絶対;
左：450px;
トップ：105px;
}
.but .LEFT {
高さ：は50px。
幅：は50px;
位置：絶対;
左：
} 0 ;
.dian {
位置：絶対。
下：5pxの;
左： 50％;
変換：移動X（ -50％ ）。
}
.dian李{
フロート：左;
高さ：10pxの;
幅：10pxの;
国境 - 半径：5pxの;
背景 - 色：＃1 E84A7E。
マージン： 0 5pxの;
}
.dianの.act {
背景 - 色：papayawhip。
}
</スタイル>
<身体>
の<divのid = "ボックス">
の<divのid = "BOX1">
<IMG SRC = "IMG / 1.JPG" />
<IMG SRC = "IMG / 2.JPG" />
<IMG SRC =」 IMGは/ 3.JPG」/>
<IMG SRC = "IMG / 4.JPG" />
<IMG SRC = "IMG / 5.jpg" />
<IMG SRC = "IMG / 1.JPG" />
</ divの>
<DIV CLASS = "ではなく">
<ボタンクラス= "右" >>>> </ button>の
<ボタンクラス= "左"> <<<< /ボタン>
</ div>
<ULクラス= "ディアン">
</ UL>
</ div>
</ BODY>
JSの一部
<SCRIPT SRC = "jquery.js"> </ SCRIPT>
<SCRIPT> // 。1要素選択のvar $ボックス= $（ "＃1 BOX1" ）
VAR $ $ box.find IMG =（ "IMG" ）
のvar $右= $（ "右"。 ）
VAR $ $左=（ "左"。 ）
VAR $ディアン= $（ "ディアン。" ）
// 2取得画像の数VAR NUM = $ img.length;
// 3 IMGへ。親幅の数を設定*幅1
$ box.width（img.lengthの$ *の$のimg.width（））
はconsole.log（$ img.width（））// $ボックス[0] .style.widthて、 = $ img.length * $のimg.width（） + "PX」 //
console.log（$ box.width（））
// インデックス開始画像を設定
するvar = 0インデックスを// 4をクリックして、右のボタンである// なぜなら、LETの直接の親のimgローリング// 最初と最後のではない場合その後、// 映画は、それが最初にあるべき最後の時間をクリックしに来たときに// が、これは右から1時間になりますので、// IMG追加する最後に// 率の変化を。値1
$のright.on（ "クリック"、機能（）{
IF（NUMインデックスは=== - 。1 ）{
//は。5最初の0と最後に追加されることはありません// インデックス= 0
、インデックス1 =。// その後、6それは最後の時間に来て、クリックするか、右から出てくる// ので、強制的に位置BOX1の先頭に戻って箱を取りました
ボックス$ [0] = 0 + .style.left "PX"
} 他{
インデックス ++
}
// はconsole.log（インデックス）
の$ box.stop（）。アニメーション（{
// 7各電流の長さをダウンクリック絵のこの絵*幅は
左：-index *の$のimg.width（）
}）
// 10現在の画像のインデックスに設定されたクラスの属性は、絵が彼に行った上での色の、いくつかの小さなドット
の$ dian.findを（ "李"）。EQ（インデックス）.addClass（ "ACT" ）.siblings（）。removeClass（）
}）
$のleft.on（ "クリック"、関数（）{
IF（インデックス=== 0 ）{
/ /左のボタンをクリックすると、インデックスが最後の後BOX1位置を行ってきましたし
、インデックス= $ img.length - 2
$ボックス[ 0] = .style.left - （$ img.length）* $のimg.width（）+ " PX "
// はconsole.log（$ボックス[0] .style.left）
} 他{
インデックス -
}
// にconsole.log（インデックス）
$を（box.stop）アニメイト（{。
左： -index * $ IMG .width（）
}）
// 10現在の画像のインデックスに設定されたクラスの属性は、絵が彼に行って、上の色のいくつかの小さなドット
の$ dian.find（「LI」）。 EQ（インデックス）.addClass（ " ACT " ）.siblings（）。removeClass（）
}）
VaRの STR =" "
// 8 NUM、ULがリチウムに加えをループ
するための（VAR ; IはNUMを<; I = 0 Iは++ ）{
STR + = '<LI> </ LI> `
}
$のdian.html（STR）
// 9とします。ファーストクラスのプラス
の$ dian.find（「LI」）。EQ（0）.addClass（「ACT」）
// 11タイマーをスタート、クリックイベントを行う
// をクリックして定期的にと同等左右ボタン
//はクリックに使用される方法なお、
VaRの時間を、
時間 =たsetInterval（関数（）{
$のright.click（）
}、 3000 ）
// 12は、ホバー方法であって、
// 自動回転を停止するマウス
// 開口からマウスを
box.hover $（関数（）{
てclearInterval（時間）
}、関数（）{
時間のsetInterval（= 関数（）{
$のright.click（）
}、 3000 ）
}）
// 13は、必要なステップのクリックを理解することは困難ですMouseEnter変更することができます
// マウスクリックがオンにそれを保存し、インデックスactindexに設定するために、現在のインデックス値を取得します誰が
、（「クリック」の上に。$のdian.find（「LI」）を関数（）{
VAR actindex = $ （この）.INDEX（）
指数 = actindex
// と現在のクリックを開いてみましょう
。$のbox.stop（）アニメイト（{
左： -indexの*の$のimg.width（）
}）
// プロパティプラスの少し上をクリック
$ dian.find（ "LI"）EQ （インデックス）.addClass（。 "ACT" ）.siblings（）。removeClass（）
}）
</ SCRIPT>