一定時間ごとに画像を切り替えたいです！

締切済

質問者：wacon4
質問日時：2009/02/13 23:19
回答数：3件

JavaScriptを使って一定時間ごとにフェードイン、フェードアウトしながら画像を切り替えたいです!!
インターネットでいろいろ調べていたのですが画像の切り替えはあってもフェードイン・フェードアウトをしながらのサンプルがなかったもので。
ちなみに最後の画像で止めたいです。

こんな感じにしたいです↓↓
OPENERS
http://openers.jp/

誰か解る方がいれば宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： mokpok
回答日時：2011/07/11 14:32

直接の回答ではないのでアレですが、フェードイン系のエフェクトなら、

jQuery等のライブラリを使ってみてはどうでしょうか。

http://semooh.jp/jquery/api/effects/fadeIn/%5Bsp …

- 0
- 件

通報する

No.2

回答者： _pipi_
回答日時：2009/02/14 05:47

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>Change Image</title>

<style type="text/css">
#photo { width:640px; height:150px; border:1px red solid; margin:0px; padding:0px; background-color:#fff; }
#photo img { border:0px none; }
</style>

<ul id="photo">
<li><a href="htp:/test/" target="_blank"><img src="./img/0.gif" alt="0.gif"></a></li>
<li><a href="htp:/test/" target="_blank"><img src="./img/1.gif" alt="1.gif"></a></li>
<li><a href="htp:/test/" target="_blank"><img src="./img/2.gif" alt="1.gif"></a></li>
<li><a href="htp:/test/" target="_blank"><img src="./img/4.gif" alt="1.gif"></a></li>
<li><a href="htp:/test/" target="_blank"><img src="./img/5.gif" alt="1.gif"></a></li>
<li><a href="htp:/test/" target="_blank"><img src="./img/6.gif" alt="1.gif"></a></li>
</ul>

<script type="text/javascript">
//@cc_on
function ChangeImage () { this.init.apply(this, arguments); }
//初期化
ChangeImage.prototype.init = function (elementId) {
var c, s, t;

this.sotowaku = document.getElementById(elementId);//外枠
this.list = [];//ImageList
this.no = 0;//LIの番号
this.timer = null;//タイマーID
this.quit = null;//中止？
this.opacity = null;//透明度

s = this.sotowaku.style; s.overflow = 'hidden'; s.position = 'relative'; //外枠CSS
c = 0;
while (t = this.sotowaku.childNodes[ c++ ]) { //子LIのみリストに追加
if ( t.nodeType == 1 && t.nodeName == 'LI' ) {
if (c != 1) t.style.visibility = 'hidden';
this.list.push( { 'LI': t, 'IMG': this.setDef(t.getElementsByTagName('img')[0], c==1) } );//最初の画像以外透明
}
}
return;
}
//imgの初期値設定
ChangeImage.prototype.setDef = function (e, f) {
var s = e.style;

s.top = '0px';
s.left = '0px';
s.width = this.sotowaku.offsetWidth + 'px';
s.height = this.sotowaku.offsetHeight + 'px';
s.position = 'absolute';
if (!f) s./*@if(1) filter = 'alpha(opacity=0)' @else@*/ opacity = 0/*@end@*/;
return e;
}
//タイミングの設定表示時間,消去時間,ステップ(%) // default [5,1,1]
ChangeImage.prototype.start = function (atime, dtime, step) {
this.atime = atime || 5000;
this.step = (step == undefined || step < 1) ? 1: step;
this.wait = Math.floor((dtime || 1000) / (100 / this.step));
this.loop0();
return;
}
ChangeImage.prototype.loop0 = function () {
this.setOpacity(100);
this.step *= -1;
if (!this.quit) setTimeout( (function (cb_) { return function () { cb_.loop1(); };})(this), this.atime);
}
ChangeImage.prototype.loop1 = function () {
this.timer = setInterval( (function (cb_) { return function () { cb_.changeOpacity(); };})(this), this.wait);
}

//透明度と対象物の前面化
ChangeImage.prototype.setOpacity = function (op, z, v) {
var t = this.list[ this.no ];
t.IMG.style./*@if(1) filter = 'alpha(opacity='+ op + ')'; @else@*/ opacity = op / 100 /*@end@*/;
this.opacity = op;
if(z != undefined) t.LI.style.zIndex = z;
if(v != undefined) t.LI.style.visibility = ['hidden','visible'][z];
}
//透明度の設定
ChangeImage.prototype.changeOpacity = function () {
var n = this.opacity + this.step;
if (n < 0) {
this.setOpacity(0, 0, 0);
this.no = ++this.no % this.list.length;
this.setOpacity(0, 1, 1);
this.step *= -1;
} else if (100 < n) {
clearInterval(this.timer);
this.loop0();
} else {
this.setOpacity(n);
}
return;
}

var p = new ChangeImage('photo');
p.start(2000,1000,2);
</script>