Javascriptで、以下のような条件のプログラムが必要です。
1.jpg~8.jpgまで8枚の画像があります。
8枚の画像は、それぞれ決まった別のページにリンクしています。
1.jpg →1.html
2.jpg →2.html
・
・
8.jpg→8.html
8枚の画像を4つのグループに分ける。
グループ1 1.jpg , 2.jpg
グループ2 3.jpg , 4.jpg
グループ3 5.jpg , 6.jpg
グループ4 7.jpg , 8.jpg
グループ1から4までを1時間ごとに切り替える。
1~4時まで→グループ1をランダム表示
5~12時まで→グループ2をランダム表示
13~18時まで→グループ3をランダム表示
19~0時まで→グループ4をランダム表示
1時間ごとにランダム表示ならなんとかできたのですが、
画像リンクがそれぞれ別であることをすっかり忘れていて、
行き詰まっています。
新しい別の方法を知りたいので、すみませんが
うまくいかなかったソースは掲載していません。
お分かりになる方がおられましたら、
プログラムをお教えいただけないでしょうか?
よろしくお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
>1時間ごとにランダム表示ならなんとかできたのですが、
そこまでできていれば、対象とするデータを時間によって入れ替えてあげるだけですむでしょう。
配列に、
var data = [
{ time:[1, 4], image:['1.jpg, 1.html', '2.jpg, 2.html'] },
・・・・
];
みたいに定義しておくとか。
(扱いやすい形であればなんでもよい)
指定の1~8がそのままで良いのなら、定義しておかなくても、画像名やリンク先を index + '.jpg' とか index + '.html' みたいにして求めることも可能です。
>新しい別の方法を知りたいので、
現在の方法が不明なので、同じなのか別なのか判別できません。
すぐに思いつくのは。
◇時間の判別方法
1)↑の例示のように、開始・終了の両方を抑えその間であることを判定
2)連続しているなら、両方でなくても、開始だけ比較すればよい
3)6時間毎に割り振るなら、時刻を6で割って求める
◇時間ごとのセット
1)setTimeoutやIntervalで定期的に時間をチェックする。
2)最初に時間をチェックして、次の時間の変わり目までを計算し、
それに合わせて間隔をセットし、時間を確認するようにする。
(誤差を吸収する仕組みが必要)
3)多少の時間誤差が合っても良いのなら、2)で最初にセットしたら、あとは
無条件に6時間毎に画像を変えるルーチンを動かす。(Dateは確認しない)
◇データの持ち方
1)↑の例示のようにセットにして定義しておく。
2)内容ごとに変数を変えて配列で定義。
3)ご提示のように機械的に計算可能な時刻、文字列である場合は
データ定義などせず、計算値で求めてしまう。
ぐらいかな。組み合わせ方で3^3になるので27通り?(…と言えるのか?)
と思ったら、あれっ?
>グループ1から4までを1時間ごとに切り替える
1~4のグループは時間指定があるから、切り替わらないでしょう。
同じグループ内で、画像を選択し直すのなら意味はわかるけれど、1グループに画像が2個しかないみたいなので、切り替えると言っても…
(同じものの連続を許すか許さないかで大きく変わる)
なので、↑の「6時間ごと」は1時間毎ということになるのかな?
No.1
- 回答日時:
>新しい別の方法
と、あるので、どう答えてよいのか困ります。でっ、マジ短く。
<p><a href="1.html" id="a"><img src="1.jpg" id="b" alt="*"></a></p>
<script type="text/javascript">
j=+'711113333333355555577777'.charAt((new Date).getHours())+Math.random()*2|0
with(document)getElementById('a').href=j+'html',getElementById('b').src='./img/'+j+'.gif'
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- Excel(エクセル) excelで検索した商品の画像(ネットワーク上の)を表示させたい。 3 2023/06/28 00:32
- Excel(エクセル) Excel 毎日手作業で時間がかかって、泣きたいです、、、VBAのプロの方、助けてください。。。 3 2022/10/25 04:26
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- Excel(エクセル) EXCELのグラフを画像(JPG形式)で保存、通常実行がうまく行かない。ステップインはうまく行く 3 2022/08/30 12:06
- Windows 10 Windows10にてjpg形式の画像が開けません 4 2022/08/24 14:37
- HTML・CSS 角丸画像の背景色を透明にしたいです 1 2023/06/23 23:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
textareaに画像を表示したい
-
prettyphotoの画像表示について
-
画像をドラッグ&ドロップで移...
-
image.onload = .. の後に imag...
-
画像を指定座標まで移動させたい
-
マウス追従スクリプトについて
-
プルダウンの位置がwin/macでず...
-
画像をクリックすると、詳細の...
-
プルダウンメニューを作りたい
-
クリックして変更した画像を他...
-
【java】背景画像を一定時間で...
-
edgeでスクロールバーに色が表...
-
画像の重なりの順序を代える方...
-
bxsliderにて読み込み後に内容...
-
JQueryを使用して画像をゆっく...
-
JavaScriptとチェックボックス...
-
画像の上に画像リンクを貼る方法
-
画像ランダム表示、しかしダブ...
-
iframe内のリンク文字のマウス...
-
PC設定に依存しない曜日判定JS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
1枚の画像をクリックして複数の...
-
Javascript で共通の処理をどこ...
-
JavaScriptとチェックボックス...
-
画像ランダム表示、しかしダブ...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
1枚の画像をクリックすると複数...
-
javascriptで毎月替わる画像
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報