SHOJI's Code
 仕事や趣味で書いた各種言語のプログラミングコード(エクセルVBA,PHP,C/C++/C#,JavaScript等)、その他雑記。
2017.08<<123456789101112131415161718192021222324252627282930>>2017.10
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

以前、あるお店のホームページを作る話があって、その要望に画像のスライドショーというのがあった。
はじめは、Flashかなんかでやらなきゃしょうがないなぁ、と思っていたんだけど、ある日ふと思いついた。

・・・・JavaScriptでできるんじゃない?
<html>
<head>
</head>
<style type="text/css">

#img_bottom {
width: 200px;
height: 150px;
}

#img_top {
width: 200px;
height: 150px;

opacity: 1;
}

</style>

<script type="text/javascript">
<!--

var list;
var num;
var idx;
var op;

function load()
{
list = new Array(
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg"
);
num = list.length;
idx = 0;

prepare();
}

function prepare()
{
var img1 = list[ idx ];
var img2 = list[ (idx + 1) % num ];

setImageAndOpacity(document.getElementById("img_top"), list[ idx ], 100);
setImage(document.getElementById("img_bottom"), list[ (idx + 1) % num ]);

idx = (idx + 1) % num;
op = 100;

fade();
}

function fade()
{
setOpacity(document.getElementById("img_top"), op);
op -= 10;

if( op > 0 )
setTimeout("fade()", 100);
else
setTimeout("prepare()", 1000);
}

function setImageAndOpacity(obj, f, o)
{
setImage(obj, f);
setOpacity(obj, o);
}

function setImage(obj, f)
{
obj.style.backgroundImage = "url(" + f + ")";
}

function setOpacity(obj, o)
{
obj.style.filter = "alpha(opacity=" + o + ")"; // for IE
obj.style.MozOpacity = o / 100; // for FireFox, NetScape
obj.style.opacity = o / 100; // for Opera, Safari
}


//-->
</script>

<body onload="load();">
<div id="img_bottom">
<div id="img_top">
</div>
</div>
</body>
</html>


テーマ:JavaScript(ジャバスクリプト) - ジャンル:コンピュータ
コメント
この記事へのコメント
コメントを投稿する

管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2004-2006 SHOJI, Powered By FC2ブログ all rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。