Jsの簡単な手書きのカルーセル図

HTML：

CSS

.na1 {
幅：1349px。
高さ：620px;
オーバーフロー：隠されました;
}

.DD {
/ *幅：100％。* /
高さ：100％;
margin-left：-586px;
}

.PP {
幅：5396px。
高さ：620px;
margin-left：0PX。
}

.aa {
/ *幅：100％。* /
高さ：100％;
margin-left：-586px;
}

/ *轮播图* /
VARのAA = 0;
VAR waili = document.getElementsByClassName（ "PP"）[0];
VARタイマー。
// dingshiqi
タイマー=たsetInterval（関数（）{
  waili.style.transition = "1";
  AA = AA-1349;
  IF（AA <= - 4077）{
   waili.style.transition = "0";
   AA = 0。
  }
   waili.style.marginLeft = AA + "ピクセル";
} 2500）
}）

<！DOCTYPE HTML>
<HTML>
	<ヘッド>
		<メタ文字セット= "UTF-8">
		<タイトル> </ TITLE>
		<スクリプトSRC = "../公開/ jquery.min.js" タイプ= "テキスト/ javascriptの" charset = "UTF-8" を> </ SCRIPT>
	</ head>の
	<スタイルタイプ= "テキスト/ cssの">
	.na1 {
		幅：1349px;
		高さ：620px;
		オーバーフロー：隠されました;
	}
	
	.DD {
		/ *幅：100％; * /
		高さ：100％;
		margin-left：-586px;
	}
	
	.PP {
		幅：5396px;
		高さ：620px;
		margin-left：0PX。
	}
	
	.aa {
		/ *幅：100％; * /
		高さ：100％;
		margin-left：-586px;
	}
	
	</スタイル>
	<身体>
		<！ - ヘッダー - >
		<のdivクラス= "NA1">
			<のdivクラス= "PP">
				<のdivクラス= "NA">
					<IMGクラス= "DD" SRC = "../ IMG /庄司/ 1.JPG">
				</ div>
				<のdivクラス= "NA">
					<IMGクラス= "DD" SRC = "../ IMG /庄司/ 1.JPG">
				</ div>
				<のdivクラス= "NA">
					<IMGクラス= "DD" SRC = "../ IMG /庄司/ 1.JPG">
				</ div>
				<のdivクラス= "NA">
					<IMGクラス= "DD" SRC = "../ IMG /庄司/ 1.JPG">
				</ div>
			</ div>
		</ div>
		<！ - 素早いタッチ2  - >
	</ BODY>
</ HTML>
ます。<script type = "text / javascriptの">

	//図2.カルーセル
	
	$（関数（）{
	/ * * Huidingbu /
	 $（ウィンドウ）.scroll（関数（）{
		VAR登輝= $（文書）.scrollTop（）;
		//警告（ホイ）。
		//にconsole.log（ホイ）。
		IF（ホイ> 300）{
			。$（ "jiantou"）フェードイン（）;
		}他{
			。$（ "jiantou"）フェードアウト（）;
		}
		}）
		$（ "jiantou"）。{）（（機能をクリックしてください
			$（ "HTML、ボディ"）。アニメーション（{
			scrollTopスプライト '0PX'}、500）。
	}）
		
	
	// $（」。cent211" ）。マウスオーバー（関数（）{
	
	// $（この）の.css（ "のborder-right"、 "1pxの固体灰色"）;
	//のsetTimeout（関数（）{
	// $（ "cent211。 "）、CSS（" ボーダー右"、 "なし"）。
	//}、1000）。
			
	//}）。
	// $（」。cent311" ）。マウスオーバー（関数（）{
	// $（この）の.css（ "のborder-right"、 "1pxの固体灰色"）;
	//のsetTimeout（関数（）{
	// $（ "cent311。 "）、CSS（" ボーダー右"、 "なし"）。
	//}、1000）。
	//}）。
	/ *カルーセル図JQ * /
	/ *ヴァールAA = 0;
	VAR waili = $（ "PP"）EQ（0）。
	時間でした。
	// dingshiqi
	タイマー=のsetInterval（関数（）{
		waili.css（ "遷移"、 "1"）。
		AA = AA-1349;
		IF（AA <=  -  4077）{
			waili.css（ "遷移"、 "0"）。
			AA = 0;
		}
			waili.css（ "marginLeft"、AA + "PX"）。
	}、2500）* /
	/ * *カルーセル図/
	VAR AA = 0;
	VAR waili = document.getElementsByClassName（ "PP"）[0];
	時間でした。
	// dingshiqi
	タイマー=のsetInterval（関数（）{
		waili.style.transition = "1";
		AA = AA-1349;
		IF（AA <=  -  4077）{
			waili.style.transition = "0";
			AA = 0;
		}
			waili.style.marginLeft = AA + "ピクセル"。
	 } 2500）
	}）
	
/ * $（」。cent211" ）。マウスオーバー（関数（）{
		$（この）.animate（ "のborder-right"、 "1pxの固体グレー"）ディレイ（1000）（ "ボーダー右"、 "なし"）。。。
	}）/ *
</ SCRIPT>

Jsの簡単な手書きのカルーセル図

おすすめ