トップページ

このブログについて

全記事一覧(新着順)

テーマ別記事案内

短期間ゲーム制作講座


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タッチすると画像が切り替わって時間が経つと元に戻る

クリックすると画像が切り替わって、しばらくすると戻るみたいなのが作りたくなりました。
できあがりがこちら↓
タッチすると1秒間画像が切り替わります。


一瞬嫌そうな顔をされれば成功です。
(画像のチョイスがちょっとアレですね。手元にあったので……)

ソースはこちら↓
<img id="gazo" onclick="changeIMG()" src="初期画像のURL"
   width="200" height="500" border="0" alt="">

<script>
//画像を配列に格納する
var img = new Array();

img[0] = new Image();
img[0].src = "初期画像のURL";
img[1] = new Image();
img[1].src = "切り替え画像のURL";

//画像番号用のグローバル変数
var cnt=0;
var timer1;

//画像切り替え関数
function changeIMG(){
    if( cnt==0 ) {
        cnt++;  
        //画像を切り替える
        document.getElementById("gazo").src=img[cnt].src;
        timer1=setTimeout("reset()",1000);
    }
}

function reset() {
    cnt=0;
    document.getElementById("gazo").src=img[cnt].src;
    clearTimeout(timer1);
}
</script>

こちらのサイト様で学ばせていただきました→パズルネット智慧
該当のページ→画像を切り替えるスライドショー

ホームページの飾りにこういうちょっとした仕掛けがあると楽しいですね。
お花が咲くとか。ジャンプさせるときなんかにも応用できそうです。


関連記事
このエントリーをはてなブックマークに追加

コメント

コメントの投稿

非公開コメント


LINEスタンプ

LINEスタンプ承認されました

スポンサーリンク

このブログについて


★全記事一覧★

人気記事

人気ブログランキング



おかげ様で1位なことがあります。
ありがとうございます!

良い感じのペンタブ



Intuoscomicを使用しています 使い易いです。
替え芯やCLIP STUDIO、Pixiaなど絵を描く専用のソフトも数種付属しています。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。