JavaScriptノートの処理画像

3589 ワード

JavaScript html 機能スクリプト Random border

JavaScriptは、最も一般的で最も顕著な用途の一つとして、ウェブページに動画を追加することで、視覚的にも魅力的です.中には反転器の効果があり、広告バーの応用があります.2つの実用的な例を記録します.
(一)循環広告バーにリンクを追加する
これにより、訪問者はリンクをクリックして広告に関するサイトに入ることができます.
広告バーに必要なHTML

        <!--            -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Rotating Banner with Links</title>
	<script type="text/javascript" src="script01.js"></script>
</head>
<body bgcolor="#FFFFFF">
	<div align="center">
		<a href="linkPage.html"><img src="images/banner1.gif" width="400" height="75" id="adBanner" border="0" alt="ad banner" /></a>
	</div>
</body>
</html>

以下のjsスクリプト(script 01.js)は、循環広告バーを真にクリックできる広告バーに変換する方法を示しています.

window.onload = initBannerLink;

var thisAd = 0;

function initBannerLink() {
	if (document.getElementById("adBanner").parentNode.tagName == "A") {
		document.getElementById("adBanner").parentNode.onclick = newLocation;
	}
//  adBanner            ，     ，        ，   newLocation()  .	
	rotate();
}

function newLocation() {
	var adURL = new Array("negrino.com","sun.com","microsoft.com");
	document.location.href = "http://www." + adURL[thisAd];//               http://www.  adURL                   return false;//            href，     URL  
}

function rotate() {
	var adImages = new Array("images/banner1.gif","images/banner2.gif","images/banner3.gif");

	thisAd++;
	if (thisAd == adImages.length) {
		thisAd = 0;
	}
	document.getElementById("adBanner").src = adImages[thisAd];

	setTimeout(rotate, 3 * 1000);
}

注意:adURL配列のメンバー数はadImages配列と同じでなければいけません.このスクリプトは正常に動作します.
イメージフォルダを作って、banner 1.gif、banner 2.gif、banner 3.gif形式の写真を保存します.

(二)ランダム開始ループ表示画像
多くの画像が表示されている場合、ページを読み込むたびに同じ画像から表示したくないかもしれません.以下のHTMLとjsの組み合わせでランダムに開始できます.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Rotating Random Banner</title>
	<script type="text/javascript" src="script02.js"></script>
</head>
<body bgcolor="#FFFFFF">
	<div align="center">
		<img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="Ad Banner" />
	</div>
</body>
</html>

以下のjsスクリプト(script 02.js)は、ランダム画像から画像を表示することができます.

window.onload = choosePic;

var adImages = new Array("images/reading1.gif","images/reading2.gif","images/reading3.gif");
var thisAd = 0;

function choosePic() {
	thisAd = Math.floor((Math.random() * adImages.length));
	document.getElementById("adBanner").src = adImages[thisAd];
	
	rotate();
}

function rotate() {
	thisAd++;
	if (thisAd == adImages.length) {
		thisAd = 0;
	}
	document.getElementById("adBanner").src = adImages[thisAd];

	setTimeout(rotate, 3 * 1000);
}

同じイメージフォルダを作成し、readingn 1などの3枚のgifフォーマットの画像を追加します.(源『JavaScript基礎教程』)

JavaScriptにおける継承の原型式継承