ここから質問投稿すると、最大10000ポイント当たる!!!! >>

こんばんは。
この度、HPにJavascriptを導入してみようと思い試行錯誤している最中です。
したい事は絵をFLASHではなくてjsで複数入れ替えたいと思うのですが
どうもイメージに合ったソースが見つかりません。

参考としては
http://qpon.cool.ne.jp/3d/3dgif.htm
http://www.css-lecture.com/log/javascript/013.html
http://www.openspc2.org/reibun/JS_TipsAndTricks/
を参考に見てみましたがどうも辿り着けません。

イメージとしてはhttp://www.apple.com/jp/の用に
滑らかに絵を変更したいのですが
何処かにスクリプトがありましたら誘導頂ければ幸いです。

宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

なんかよくわからないけど…



ご参考まで。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#screen, #screen img { width:600px; height:400px; }
#screen { position:relative; }
#screen img { position:absolute; }
#images { display:none; }
</style>

<script type="text/javascript"><!--
window.onload = function() {
var index = 0, tId;
var second = 10, speed = 40; // 書換え間隔(秒), 変化速度

var elm = document.getElementById('images').getElementsByTagName('IMG');
var scrn = document.getElementById('screen');
setInterval(change, second * 1000);
function change(){
var img = elm[index].cloneNode(false);
setOpacity(img, 0);
index = ++index%elm.length;
scrn.appendChild(img);
tId = setInterval(apear(img), speed);
}
function apear(e) {
var o = 0;
return function() {
o = o<96?(o + 4):100;
setOpacity(e, o);
if (o == 100) {
clearInterval(tId);
while (scrn.childNodes.length>1) scrn.removeChild(scrn.firstChild);
}
}
}
function setOpacity(e, o) {
e.style.opacity = o/100;
e.style.filter = 'alpha(opacity=' + o + ')';
}
}
--></script>
</head>

<body>
<div id="screen"><img src="Default.jpg" alt="defalut"></div>

<div id="images">
<img src="A.jpg" alt="A">
<img src="B.jpg" alt="B">
<img src="C.jpg" alt="C">
<img src="D.jpg" alt="D">
<img src="E.jpg" alt="E">
</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

ソースまで態々有難う御座います。
まだ私自身も実験していませんが心から嬉しかったです。
本当に有難う御座いました。

お礼日時:2010/04/03 05:05

http://oshiete.goo.ne.jp/search_goo/result/?PT=& …

「なんじゃこれ?ひんしつ」から、「それなりのひんしつ?」まで。
まずはさがそう!
    • good
    • 0

おはよう。


下記「JAVATEAはいかが?」から
「JAVATEA13:画像の切替を自動的に行います。」を参照下さい。
http://www.geocities.jp/digitwland/javatea/javat …
なお、「滑らかに絵を変更したい」とは画像がフェードアウトして別の画像に変わる、という意味でしょうか。
それですとフェードアウトする過程の「薄くなった」画像も何枚か用意して、挟み込むことになるでしょう。
    • good
    • 0
この回答へのお礼

ありがとうございます。
『フェードアウト』を言う動作だったのですね・・・
誘導サイト様は似ていますのでもう少し検索をしてみようと思います。

お礼日時:2010/04/03 05:07

フェードイン・フェードアウトを同時におこなってみては?


参考URL
http://javascript.eweb-design.com/0814_fio.html
動作確認はしておりませんが・・・
<!--
// 画像のフェードイン・フェードアウト
spd = 50; // 変化させる間隔(ミリ秒単位)
ntc = 2; // 何%ずつ変化させるか
cnt = 0;

function fdInOutImg(img1,img2) {
document.images[img1].filters['alpha'].opacity = cnt;
document.images[img2].filters['alpha'].opacity = 100-cnt;
cnt += ntc;
if(cnt >= 100) return;
setTimeout("fdInOutImg('"+img1+"','"+img2+"')",spd);
}

//-->
    • good
    • 0
この回答へのお礼

ご教授有難う御座います。
ソースも今から試してみようと思います!!

お礼日時:2010/04/03 05:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング