30秒ごとに違う画像をランダムに自動表示する仕組みを作りたい

Question

前提・実現したいこと

30秒ごとに違う画像をランダムに自動表示する仕組みを作りたいです。
できれば画像毎に対応した30文字程度のキャプションが設けられ、クリックすると詳細が記載されたページに飛ぶという機能もつけたいです。

var a=[];
a[0]="img1.jpg";
a[1]="img2.jpg";
a[2]="img3.jpg";

var x;
x=Math.floor(Math.random()*3);

document.write
  ("<img src='"+a[x]+"'>");```

調べてみるとjavascript,jQueryを使えばランダムに画像を表示させることが可能ということが分かりましたが時間ごとに画像を変えたり、対応するリンク付きのキャプションの表示のさせ方が分かりません。

宜しくお願い致します。

Answer 1

document.writeを使うのは避けたほうがいいです。
Why is document.write considered a “bad practice”? - Stack Overflow

予めHTMLにimgタグを用意しておくか、DOM操作でjavascriptから動的に生成するほうがいいです。

javascript,jQueryを使えばランダムに画像を表示させることが可能ということが分かりました

jQueryはjavascriptのライブラリで、DOM操作をやりやすくしてくれるものです。
今の場合ではjQueryは別に使うメリットはないとおもいます

時間ごとに

setIntervalを使うといいでしょう。
setInterval - MDN

画像を変えたり

　

キャプションの表示のさせ方

参考になりそうな記事
DOM② - Qiita

対応するリンク付き

対応するというのはよく分かりませんが、リンクは<a>タグで作れます。

Comments

[sakumon88]

回答ありがとうございました！
jQueryは使わなくてもいいんですね。
リンク先のページで勉強して試してみます。

Answer 2

時間ごとに画像を変えたり

このあたりがヒントになるでしょう
JavaScriptでsetIntervalを使う方法【初心者向け】 | TechAcademyマガジン

対応するキャプション

配列の要素に配列や連想配列を持つことができますので、これを応用して対応をつければいいでしょう。
多次元配列 - 配列 - JavaScript入門

リンク付きのキャプション

A要素を生成しドキュメントに挿入するとよいでしょう。
JavaScriptプログラミング講座【アンカーについて（HTMLAnchorElement）】

Comments

[sakumon88]

回答ありがとうございました！
リンク先のページで勉強します。

Answer 3

setInterval()
で検索してください

Comments

[sakumon88]

回答ありがとうございました！

Answer 4

もうすでにいろいろ回答がついているので、これだけ。
データはこんな感じで持ったほうが扱いが楽かもしれません。

var a = [
  { src: 'img1.jpg', link: 'img1.jpg', caption: '1の画像です' },
  { src: 'img2.jpg', link: 'img2.jpg', caption: '2の画像です' },
  { src: 'img3.jpg', link: 'img3.jpg', caption: '3の画像です' }
];

Comments

[sakumon88]

回答ありがとうございます！
この方法だとあとで画像を追加するときも分かりやすそうですね。
ただ、この配列で試してみると画像が表示されませんでした。紹介してくださったページで勉強してみます。