<！DOCTYPE HTML>
<HTML>
<HEAD>
<METAのcharset = "UTF-8">
<タイトル> </ TITLE>
<！ -ブートストラップコアCSSファイルの最新バージョン- >
<リンクのrel = "スタイルシート" HREF = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"誠実= "+ PmSTsz BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va-SHA384 / K68vbdEjh4u" crossOrigin = "匿名">
<！ - - （通常は導入せずに）、オプションのブートストラップのテーマファイル- >
<リンクのrel = "スタイルシート"のhref =「https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme .min.css "整合性=" SHA384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl / SP "crossorigin ="匿名「>
<！ -最新のブートストラップコアJavaScriptファイル- >
<スクリプトSRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"整合性= "SHA384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "匿名"> </ SCRIPT>
<スタイルタイプ= "テキスト/ CSS">
* {マージン：0;パディング：0;リスト- スタイル：なし;}
.slider {
幅：500pxなど。
高さ：332px;
オーバーフロー：隠されました;
位置：相対;
}
.slider .slides {
高さ：332px;
幅：2500px;
}
.slider .slide {
フロート：左;
幅：500pxなど。
}
。.Slider IMG {スライド
幅：500pxなど;
高さ：332pxを;
}
#navDiv A {
幅15ピクセル、
高さ15ピクセル、
背景 - 色：赤;
マージン： 0 5pxの;
フロート：左;
不透明度： 0.5; / * セット透明* /
}
#navDiv a.active {
背景 - 色：ブラック;
}
#navDiv A：ホバー{ / * セットマウス拡散効果* /
背景 - 色：黒。
}
#navDiv {
位置：絶対。
下：15ピクセル;
左：200pxの。
}
</スタイル>
</ head>
<body>
<DIV CLASS = "コンテナ">
<DIV CLASS = "ヘッダ">
<H1 CLASS = "テキストミュート">
jQueryの基本的なスライド
</ H1>
</ div>
< divクラス= "スライダー">
<ulのクラス= "スライド">
<LIクラス= "スライド"> <
<LIクラス= "スライド"> <IMG SRC = "IMG / 2.JPG" /> </ LI>
<LIクラス= "スライド"> <IMG SRC = "IMG / 3.JPG" /> </ LI>
<LIクラス= "スライド"> <IMG SRC = "IMG / 4.JPG" /> </ LI>
<LIクラス= "スライド"> <IMG SRC = "IMG / 1.JPG" /> </ LI>
</ UL>
<DIV ID = "navDiv">
は、<a href = "javascriptの:;" クラス= "アクティブ"> </a>の
<a href="javascript:;"> </a>の
<a href="javascript:;"> </a>の
<
$（ドキュメント）.ready（関数（）{
// 1.varダイナミックプロパティ
のvar幅= 500 ;
VAR速度= 1000 ;
VARの PAUSE = 2000; // 図のために多くの時間
のvar 間隔;
//はゲット対応する要素
のvar $スライダー= $（ "スライダー。" ）;
VAR $ slideContainer slider.find = $（ "スライド"）; // = $（ "スライド"）検索を使用して（）より明確に示した
のvar $ = $ slideContainer.findスライド（ "スライド。" ）;
VAR $ navDiv = $（ "＃navDiv A" ）;
VAR0 =インデックス;
Varの A = 0 ;
// 2.setIntervalは、タイマ設定
機能スタート（）{
間隔は =のsetInterval（関数（）{
// 左の2.1 .slidesアニメーション対
$ slideContainer.animate（{「マージン左の "：" - = "+}幅、速度、関数（）{
// 最後に画像を解析
インデックス++ ;
IF（インデックス== $ -slide.length 1。）{
インデックス = 0 ;
$ slideContainer.css（）;"マージン左"、0
}
}）。
// 2.2改变导航按钮颜色
$ navDiv.removeClass（ "アクティブ" ）;
VaRの ALLA = document.getElementsByTagName（ "A" ）;
アラ[A] .style.backgroundColor = "" ; ++ ;
もし（== allA.length）{
A = 0 。
}
アラ[A] .style.backgroundColor = "黒" 。
}、）一時停止します。
}
）（開始。
//3.停止にマウスを設定し、外に移動
slider.on $（{ // ON（）に結合する（と、複数の機能を書き込む）
のMouseEnter：関数（）{
てclearInterval（間隔ザ）;
間隔ザ = NULL ;
}、
MouseLeave：関数（）{
スタート（）;
}
}） ;
// 4.ナビゲーションボタンを設定
@ 4.1クリックスイッチの画像
$ navDiv.click（関数（）{
// アラート（$（この）.INDEX（））;
VARタイマー= $（この）.INDEX（）; / /添字配列の値を取得
$ slideContainer.animate（{「マージン左」タイマー:-( * 幅）}、スピード）;
インデックス =タイマー; // 添字のカウント値をリセットした後、まだ対応するようにクリック
= A タイマー;
// 4.2クリック変色
// 明確なスタイルの
VARアラdocument.getElementsByTagName =（ "A" ）;
アラ[A] .style.backgroundColor = "" ;
$ navDiv.removeClass（ ""アクティブ）;
// スタイルの追加
$を（この）.addClass（ "アクティブ" ）;
）};
）}
</スクリプト>
</ HTML>