- 締切済み
一定時間ごとに画像を切り替えたいです！
JavaScriptを使って一定時間ごとにフェードイン、フェードアウトしながら画像を切り替えたいです!! インターネットでいろいろ調べていたのですが画像の切り替えはあってもフェードイン・フェードアウトをしながらのサンプルがなかったもので。 ちなみに最後の画像で止めたいです。 こんな感じにしたいです↓↓ OPENERS http://openers.jp/ 誰か解る方がいれば宜しくお願いします。
- wacon4
- お礼率20% (1/5)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- mokpok
- ベストアンサー率100% (2/2)
直接の回答ではないのでアレですが、フェードイン系のエフェクトなら、 jQuery等のライブラリを使ってみてはどうでしょうか。 http://semooh.jp/jquery/api/effects/fadeIn/%5Bspeed%5D%2C+%5Bcallback%5D/
<!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>
- Hardking
- ベストアンサー率45% (73/160)
JAvaScriptでは無く、FLASHのタイムライン操作、MoveClip等で実装するべきでは。 サンプルのOPENERSもFLASHです。
