リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ 配列で画像管理

JavaScript

配列で画像管理

画像URLを配列で記述し、呼び出すサンプル。

サンプル

画像のファイル名が連番でない場合、格納場所がばらばら、外部サイト画像を表示したい場合などに有効と思われる。


【サンプルソース】javascript + css + html









<head>
<script type="text/javascript">
// <![CDATA[

//画像URL一覧
var imgURL = [
"http://riptac.net/html/test/test57/imgbox/abc.jpg", //1枚目画像URL
"http://riptac.net/html/test/test57/imgbox/cff.jpg", //2枚目画像URL
"http://riptac.net/html/test/test57/imgbox/ewd.jpg", //3枚目画像URL
"http://riptac.net/html/test/test57/imgbox/few.jpg",
"http://riptac.net/html/test/test57/imgbox/jdw.jpg",
"http://riptac.net/html/test/test57/imgbox/qee.jpg",
"http://riptac.net/html/test/test57/imgbox/wef.jpg",
"http://riptac.net/html/test/test57/imgbox/wex.jpg",
"http://riptac.net/html/test/test57/imgbox/xxx.jpg",
"http://riptac.net/html/test/test57/imgbox/zac.jpg",
];

//画像枚数は→imgURL.length
//3枚目のURLは→imgURL[2]

var cntPic = 0; //画像カウンタ
var myImg = "url("+imgURL[cntPic]+")"; //画像URL

//初期画像配置
window.onload = function(){
	drawPic();
}

//画像表示
function drawPic(){
	myImg = "url("+imgURL[cntPic]+")";
	document.getElementById("testimg").style.background = myImg; //画像URL
	document.getElementById("testimg").style.backgroundPosition = "center center"; //中央配置
	document.getElementById("testimg").style.backgroundRepeat = "no-repeat"; //繰り返し無し
	document.getElementById("testimg").style.backgroundColor = "transparent"; //背景色透明
	imgNo(); //ページ表示用
}


//前の画像No.
function picPre(){ 
	cntPic = (imgURL.length + cntPic - 1)%imgURL.length;
	drawPic();
}

//次の画像No.
function picNext(){
	cntPic = (imgURL.length + cntPic + 1)%imgURL.length;
	drawPic();
}

//ランダムの画像No.
function picRand(){
	var ransu;
	do{
		ransu = Math.floor(Math.random()*imgURL.length);
	}while(cntPic == ransu) //乱数がカウンタと同じなら繰り返し
	cntPic = ransu;
	drawPic();
}

//画像非表示
function picNone(){
	document.getElementById("testimg").style.background = "none";
}

//表示No.確認
function imgNo(){
	//alert("起動");
	document.getElementById("myText").innerHTML =cntPic+1+"/"+imgURL.length;
}
// ]]>
</script>

<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	background-image: none;
}
#testimg {
	position: fixed;
	z-index: 1000;
	height: 100%;
	width: 100%;
	display: block;
}
#testlink {
	z-index: 2000;
	position: fixed;
}

-->
</style>
</head>

<body>

<div id="testlink">
<a href="JavaScript:picPre()">前の画像</a><br />
<a href="JavaScript:picNext()">次の画像</a><br />
<a href="JavaScript:picRand()">ランダムの画像</a><br />
<a href="JavaScript:picNone()">画像非表示</a><br />
<a href="JavaScript:drawPic()">画像表示</a><br />
<div id="myText"></div><!--ページ表示-->
</div>

<div id="testimg"></div><!--スライド用レイヤー-->

</body>

















last update 2010.12.6
参考・出典等
「特に無し」

▲page top

topmemogalleryblogtestaboutlinksmail
Copylight(C)2008-2010 Riptac. All Rights Reserved.