SHOJI's Code
以前、あるお店のホームページを作る話があって、その要望に画像のスライドショーというのがあった。
はじめは、Flashかなんかでやらなきゃしょうがないなぁ、と思っていたんだけど、ある日ふと思いついた。
････JavaScriptでできるんじゃない？
はじめは、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（ジャバスクリプト） - ジャンル:コンピュータ
|
| ホーム |