バナーチェンジ

now loading...

 

[ソースコード]

<div id="bannerbox">
	<div id="banner_left">
		<a href="#" id="banner_anchor1"><img src="" alt="" id="banner_img" width="100" height="30" /></a>
	</div><!-- /#banner_left -->
	<div id="banner_right">
		<a href="#" id="banner_anchor2">now loading...</a>
	</div><!-- /#banner_right -->
<div id="banner_bottom">
<form>
	<input type="button" id="start" value="バナーチェンジ" /> <input type="button" id="stop" value="ストップ" />
</form>
</div><!-- /#banner_bottom -->
</div><!-- /#bannerbox -->

<script type="text/JavaScript">
var banners = new Array(); // 配列の要素の中に別の連想配列が入る多次元配列
	banners[0] = {"src" : "image/banner1.jpg" , "title" : "バナー画像1" , "href" : "#"};
	banners[1] = {"src" : "image/banner2.jpg" , "title" : "バナー画像2" , "href" : "#"};
	banners[2] = {"src" : "image/banner3.jpg" , "title" : "バナー画像3" , "href" : "#"};

var banner_interval_ms = 1000;
var banner_tid;
var banner_index = 0;

var start = document.getElementById('start');
var stop = document.getElementById('stop');

start.onclick = function(){
	changeBanner();
	banner_tid = setInterval("changeBanner()" , banner_interval_ms);
	start.disabled = true;

	stop.onclick = function(){
		clearInterval(banner_tid);
		start.disabled = false;
	}
}

/*********************************
setIntervalで呼び出す関数
*********************************/
function changeBanner(){
	var data = banners[banner_index];
	
	/*********************
	img src=" " alt=""をセット
	*********************/
	var img = document.getElementById('banner_img'); // 画像を取得
	img.setAttribute('src' , data['src']); // 配列要素をブラケット記法で設定 srcにbanners[0]のsrcをセット
	img.setAttribute('alt' , data['title']);
	
	/*********************
	a href=""をセット
	*********************/
	var anchor1 = document.getElementById('banner_anchor1');
	anchor1.setAttribute('href' , data['href']);
	var anchor2 = document.getElementById('banner_anchor2');
	anchor2.setAttribute('href' , data['href']);
	
	/*********************
	テキストをセット
	*********************/
	anchor2.firstChild.nodeValue = data['title'];
	
	/********************
	ループ処理
	********************/
	banner_index++; // setIntervalが1回実行される毎にインデックス番号が1ずつ増える
	
	/********************
	ループの条件
	********************/
	if(banner_index >= banners.length){ // Arrayの要素数を超えたら
		banner_index = 0;
	}
}
</script>

※多次元配列と多次元配列の取り出し方

インデックスページに戻る