誰もが効果を確認するための単純なカルーセル・チャートで初：
1、分析カルーセル図の原則：1）原則5カルーセル図6は、ユーザーがより良い経験の効果を与え、カルーセルとして画像の使用、最初と最後の1簡単な統合です
画像は、画像が右、右位置カルーセルの画像が画像を左に移動されるのと同じように移動させるレボルバにブロードキャスト2）
3）私たちはすぐに最初に切り替える必要があり、最後の1へのカルーセルときは
2、実装プロセス：クリックイベントは、自動的にイベントを回転させて、インデックス表示を切り替えます
視覚的な表示領域を含むイベントにクリックして、ボタンをクリックして、明確な自動カルーセルタイマーボタンは表示領域を除去した後に消え、自動的に回転し、左ボタンのクリックイベントをクリックし、以下の小さなドットをクリックしてください写真はイベントを切り替えます。
自動カルーセルイベントが自動的に右に、クリック可能な画像せずにデフォルトのカルーセルを果たしている、移動機能を使用して、タイマー再生を設定します。
イベントは、インデックス表示のショーを変更する場合は、現在の画像は、現在のインデックスポイントが表示され、それが赤に変わり
達成するために3、
1、HTMLとCSSスタイルシンプルなポイント
次のようにHTMLのボディであります：
<のdivクラス= "ラッパー">
<ULクラス= "IMGS">
<LI> <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>
<LI> <IMG SRC = "./ IMG / 1.JPG" ALT = ""> </ LI>
</ UL>
<DIV CLASS = "leftBtn BTN">＆LT; </ div>
<DIV CLASS = "rightBtn BTN">＆GT; </ div>
<ULクラス= "ドット">
<LI> 0 </ LI>
<LI> 1 </ LI>
<LI> 2 </ LI>
<LI> 3 </ LI>
<LI> 4 </ LI>
</ UL>
</ div>
<スクリプトSRC = "./ JS / jqueryの - 3.3.1.js"> </ SCRIPT>
<スクリプトSRC = "./ JS / demo.js"> </ SCRIPT>
CSSスタイル：
* {
マージン：0PX。
パディング：0PX。
リストスタイル：なし。
}
.wrapper {
位置：相対;
幅：400ピクセル;
高さ：350px;
国境：1pxの固体#eee。
マージン：100pxに自動;
オーバーフロー：隠された; //それは.imgsの位置であるので、隠さを設定し、表示するエリアの外にそれが見えなくなります
}
.wrapper .imgs {
位置：絶対;
左：0PX。
幅：2400px;
高さ：350px;
フォントサイズ：0PX。
}
.wrapper .imgs李{
表示：インラインブロック、ブロック要素間の/ *行レベルタブインデントを有し、フォントサイズの値の大きさが*です/
幅：400ピクセル;
高さ：350px;
}
.wrapper .imgsのLi IMG {
幅：100％;
高さ：100％;
}
.btn {
幅：40ピクセル;
高さ：30px;
位置：絶対;
トップ：50％;
マージントップ：-15px;
背景：黄色;
不透明度：0.4;
テキスト整列：センター;
行の高さ：30px;
表示：なし; // noneに初期化され、利便性のホバーイベントは、機能の初期画面を表示します。
}
.leftBtn {
左：0PX。
}
.rightBtn {
右：0PX。
}
/ * .wrapper .rings {
幅：100％;
位置：絶対;
下：30px;
テキスト整列：センター;
} * /
.wrapper .DOT {
位置：絶対;
下：30px;
左：50％;
margin-left：-65px;
幅：130px;
高さ：20ピクセル;
テキスト整列：センター;
}
.DOTリチウム.wrapper {
フロート：左;
幅：20ピクセル;
高さ：20ピクセル;
境界半径：50％。
背景：#FFF;
フォントサイズ：0PX; //テキストは、Liを消えます
margin-left：4PX。
}
jQueryの実装：
//画像の前後に移動するカルーセルの前と後のクリックイベントをクリックしてください
//自動的にイベントが何も自動的に回転画像にイベントをクリックして移動していません
//イベントのインデックス値を変更
nowIndex = 0でした。
時間= nullは、でした
。NUM = $（ 'IMGS李'）長さ - 1、
LEN = $（ 'IMGS李'）。幅（）、
ロックは真=。
//にconsole.log（NUM、S）;
エントリ関数の関数として関数init（）{// INIT（）初期化関数、
イベントボリューム（）;
アクセス（）;
changeIndex（）;
}
初期化（）;
機能イベントボリューム（）{
$（ 'ラッパー'）。ホバー（関数（）{//転出マウスイベント
$（ 'BTN'）（見せます）。
clearInterval（タイマー）。
}、 関数（） {
$（ 'BTN'）非表示（）。
アクセス（）;
}）
およそ$（ 'ラッパー '）。オン（ 'クリック'、'。BTN'、機能（）{//ボタンのクリックイベント
もし（$（この）.hasClass（ 'leftBtn'））{
移動（ '前へ'）;
}それ以外の場合（$（この）.hasClass（ 'rightBtn'））{
移動（ '次'）;
}
}）
$（ 'ドット'）。オン（ 'クリック'、 '李'、機能（）クリックイベントの{//インデックス値
VAR指数= $（この）.INDEX（）;
//にconsole.log（インデックス）
（インデックス）を移動。
}）
}
関数move（DIR）{
（ロック）{//自動的に回転する衝突を防止し、イベントが発生したクリックするロックを設定した場合、画像の表示位置が変更され
ロック= falseは、
IF（DIR == '前'）{
IF（nowIndex == 0）{
nowIndex =;
$（ 'IMGS。'）CSSは（ '左'、-nowIndex * LEN）;. //はるかに上の画像は左、-nowIndexのピクチャ位置バック* LEN
}
nowIndex - ;
$（ 'IMGS。'）アニメイト（{ '左'：-nowIndex * lenは}。、1000年、機能（）{//設定したアニメーション変異体
changeIndex（）;
ロックは真=。
}）;
}そうであれば（DIR == '次'）{
IF（nowIndex == NUM）{
nowIndex = 0;
$（ 'IMGS。'）のCss（ '左'、-nowIndex * LEN）;. //同じ権利
}
nowIndex ++;
。$（ 'IMGS '）アニメーション（{' 左'：-nowIndex * LEN} 1000、関数（）{
changeIndex（）;
ロックは真=。
}）;
}そうしないと{
nowIndex = DIR。
。$（ 'IMGS '）アニメーション（{' 左'：-nowIndex * LEN}、400、関数（）{
changeIndex（）;
ロックは真=。
}）;
}
}
}
機能changeIndex（）{
$（ 'ドット李。 '）、CSS（' 背景'、 '＃のFFF'）。
IF（nowIndex == NUM）{//インデックス値0--4
。$（ 'ドット李 '）EQ（0）の.css（' 背景'、 '＃のF40'）;
}そうしないと{
。$（ 'ドット李 '）EQ（nowIndex）の.css（' 背景'、 '＃のF40'）;
}
}
機能autoMove（）{
IF（ロック）{
clearInterval（タイマー）。
タイマー=のsetInterval（関数（）{
移動（ '次'）;
}、2000）。
}
}
小さなカルーセルの図は、の効果を示しています。
私たちは、カルーセルマップを獲得するために、下の仕上げの良いアイデアを持っている願っています。
