JavaScriptを使って一定時間ごとにフェードイン、フェードアウトしながら画像を切り替えたいです!!
インターネットでいろいろ調べていたのですが画像の切り替えはあってもフェードイン・フェードアウトをしながらのサンプルがなかったもので。
ちなみに最後の画像で止めたいです。
こんな感じにしたいです↓↓
OPENERS
http://openers.jp/
誰か解る方がいれば宜しくお願いします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
直接の回答ではないのでアレですが、フェードイン系のエフェクトなら、
jQuery等のライブラリを使ってみてはどうでしょうか。
http://semooh.jp/jquery/api/effects/fadeIn/%5Bsp …
No.2
- 回答日時:
<!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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- モニター・ディスプレイ 「.cur」のアイコン表示について 4 2023/03/04 10:21
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- その他(パソコン・周辺機器) ウインドウズ10のログオフ画面に現れる画像について教えて下さい ログオフをしてログイン待ちの画面にな 1 2023/05/19 21:37
- テレビ テレビはSONYブラビアKDL-55W900Aです。 1週間程テレビを見ずにYOUTUBEばかりを見 4 2023/03/24 01:25
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- 画像編集・動画編集・音楽編集 daVinciResolveの再生プレビュー画面がカクつきます。 daVinciResolve18を 2 2023/01/20 01:35
- VR・AR YoutubeでVRゴーグル用の切り替えボタンが表示されない? VRゴーグル(中にスマホを入れるタイ 3 2022/10/20 10:27
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同一ページ内の複数のタグに同...
-
jQueryでタブ、スライダーを使...
-
以前、ロールオーバー効果につ...
-
Slick.jsのオプションrtlについて
-
Javascriptで画像のフェードイン
-
画像をフェードアウト&フェー...
-
HTML5 footer 固定の仕方
-
MAX関数を使ってからLEFT JOIN...
-
eclipseでcssを使うためには?
-
jqueryのsortableで一部ソート...
-
【CSS】floatで左右に並べた...
-
Vb.net2005での画像の合成方法
-
CSS <div>の入れ子が反映さ...
-
JavaScriptで変更した属性の元...
-
コンテンツの移動方法について
-
textareaで入力した文字を改行...
-
読み込んだQRコードをフォーム...
-
画像の下に説明文をつけて切り...
-
背景色を一定時間ごとにランダ...
-
this.src等のthisについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
Dreamweaver上とデバイスプレビ...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
楽天APIのデータをjqueryのgetJ...
-
swiper.jsについて
-
エンドロールを枠の中で表示す...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
jQueryでタブ、スライダーを使...
-
SimplyScrollについて
-
bxSliderのランダム表示について
-
javascript 神経衰弱
おすすめ情報