for文とif文にトライ Java Scriptで画像を管理
Java Scriptが呪文としか思えないと思う見習ですが、for文を使って、連番のファイル名のついた画像ファイルを呼び出すのにトライです。画像ファイルのファイル名は「imgBig1.jpg」から数字部分のみ連番で増えていきます。
photoNoのところで、作成した画像の枚数を入力してやれば、今後、画像が増えてもここだけ修正すればOKです。(現在は9枚あります)
サンプル1のソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Java Scriptで画像を呼び出してみる</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width:150px;
margin:auto;
}
p{
float:left;
padding:5px;
}
.clr{
clear:both;
visibility:hidden;
}
img {
border:none;
}
</style>
</head>
<body>
<div>
<script type="text/javascript">
<!--
var photoNo=9;
for (var i=1; i<=photoNo; i++){
document.write('<p><a href="img/imgBig',i,'.jpg" target="_blank"><img src="img/imgBig',i,'.jpg" width="40" height="30"></a></p>');
if(i%3==0){
document.write("<br class=clr>");
}
}
// -->
</script>
</div>
</body>
</html>画像を囲っているp要素にfloatをかけています。いまさら、といわれそうですが、3枚おきに<br class=”clr”>を入れることで、floatを解除しています。これはiが3で割り切れたときには<br class=”clr”>を記述するとしています。でも、やっぱり意味のない<br class=”clr”>を入れるのはちょっとと思い、もう1つ作ってみました。
サンプル2のソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Java Scriptで画像を呼び出してみる</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div {
width:150px;
margin:auto;
}
p{
float:left;
padding:5px;
}
.clr{
clear:both;
}
img {
border:none;
}
</style>
</head>
<body>
<div>
<script type="text/javascript">
<!--
var photoNo=9;
for (var i=1; i<=photoNo; i++){
if((i-1)%3==0){
document.write('<p class="clr"><a href="img/imgBig',i,'.jpg" target="_blank"><img src="img/imgBig',i,'.jpg" width="40" height="30"></a></p>');
}
else{
document.write('<p><a href="img/imgBig',i,'.jpg" target="_blank"><img src="img/imgBig',i,'.jpg" width="40" height="30"></a></p>');
}
}
// -->
</script>
</div>
</body>
</html>無意味なbrを入れる代わりに、先頭に来るPにのみclearのスタイルをつけられるクラスを設定しました。ここでは3枚おきに行を変えたいので、3の倍数の次のものにclearを設定します。ということでiから1引いたものが3の倍数だったときは、クラスつきのPを書き出すように設定しました。
うひひ。なんか、ちょっとカッコいいかもしんない、とうれしくなる見習です。
2012年1月9日1:31 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)
森歩き日記
自称パソプロ化計画
コメントフィード
トラックバックURL: https://pc.beginners-luck.net/pcwp/2012/01/09/java-script-img-number.html/trackback