質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1536閲覧

アクセスの度にランダムに画像を表示し、その外部htmlをモーダルウィンドウで表示

HealingSalon104

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/01/23 03:37

編集2019/01/24 03:39

#カード占いのコンテンツを作成しています。

目指していること

①そのページにアクセスする度に何枚かあるカード画像から、3枚ランダムにピックアップされる
②そのカード画像には各々別htmlのリンクが貼られており、クリックするとモーダルウィンドウで表示される
(カードの画像サイズは、W:160px H:255px)

参考にしたサイト

▼①複数の画像の中から複数の画像をランダムに表示
https://oshiete.goo.ne.jp/qa/1811513.html?from=rfqa_no

※アクセスの度に画像を3枚ランダム表示

▼②外部HTMLをポップアップする
https://style01.net/1105/

※外部HTMLをポップアップ表示する(そしてそれをスライダーのように見れる)

とりあえず2つくっつけたHTML

<head></head>のところに入っているのが、ランダムに画像を表示させた上、該当のHTMLにリンク対応させたjsで、 ページ下部に記載されているjsがモーダルウィンドウのjsです。 (自分が内容を確認しやすいよう、便宜上そのようにしています。)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>占い</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <script language="javascript"> <!--// var arrImage = new Array( "img/01.png", "img/02.png", "img/03.png", "img/04.png", "img/05.png", "img/06.png", "img/07.png", "img/08.png", "img/09.png"); var arrLink = new Array( "0.html", "1.html", "2.html", "3.html", "4.html", "5.html", "6.html", "7.html", "8.html", "9.html"); var arrFlag = new Array(999,999,999); function Show(){ document.imgNumber1.src = arrImage[StartRandom(0)]; document.links[0].href = arrLink[nTemp]; document.imgNumber2.src = arrImage[StartRandom(1)]; document.links[1].href = arrLink[nTemp]; document.imgNumber3.src = arrImage[StartRandom(2)]; document.links[2].href = arrLink[nTemp]; } var nTemp, nLoop; function StartRandom(nIndex){ nLoop = 0; nTemp = Math.round(Math.random()*(arrImage.length-1)); if (nIndex != 0){ for (nLoop = 0; nLoop < nIndex ; nLoop++){ if (nTemp == arrFlag[nLoop]){ StartRandom(nIndex); } } } arrFlag[nIndex] = nTemp; return nTemp; } function Show(){ document.imgNumber1.src = arrImage[StartRandom(0)]; document.getElementById('link1').href = arrLink[nTemp]; document.imgNumber2.src = arrImage[StartRandom(1)]; document.getElementById('link2').href = arrLink[nTemp]; document.imgNumber3.src = arrImage[StartRandom(2)]; document.getElementById('link3').href = arrLink[nTemp]; } //--> </script> </head> <body onLoad="Show()"> <div class="container"> <h1>外部htmlをポップアップする</h1> <ul class="link_list"> <li id="link1"><img name="imgNumber1" src="img/01.png" width="160" height="255" border="0"></li> <li id="link2"><img name="imgNumber2" src="img/02.png" width="160" height="255" border="0"></li> <li id="link3"><img name="imgNumber3" src="img/03.png" width="160" height="255" border="0"></li> </ul> <div class="box"> <div class="box_inner"> <!-- ↓ここに.load_xxが入る --> <ul class="box_load"> </ul> <!-- ↑ここに.load_xxが入る --> <div class="close"> 閉じる </div> <ul class="arrows"> <li class="arrow_left"><span class="arrow_span">←</span></li> <li class="arrow_rigth"><span class="arrow_span">→</span></li> </ul> </div> </div> <div class="box_cover"> </div> </div> </body> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ var box =$('.box'), link = $('.link_list li '), box_cover = $('.box_cover'), close=$('.close'), box_load = $('.box_load'), box_load_li = $('.box_load>li'), arrow_left =$('.arrow_left>.arrow_span'), arrow_rigth =$('.arrow_rigth>.arrow_span'); // box_load内に要素を入れる // ①新しい配列all_linkを作る // ②link_listの中のliがいくつあるのか取ってきてforで回す // ③配列all_linkにbox0.html、box1.html・・・のような感じで値を格納する // ④box_loadの中にlink_listのliの数だけ'<li class="load_'+i+'"></li>を増やす // ⑤<li class="load_'+i+'"></li>に配列all_link[i]をloadする // ※load_0に対応するのはall_link[0](←配列の1番目。配列は0から始まります) var all_link=new Array(), links = $('.link_list').find('li'), dr='<?php echo get_template_directory_uri(); ?>'; for(var i=0;i<links.length;i++){ all_link[i]= +i+'.html'; box_load.append('<li class="load_'+i+'"></li>'); $('.load_'+i).load(all_link[i]); } //一度box_load>liを非表示にする $('.box_load>li').hide(); // linkをクリックしたとき link.on('click',function(){ //link.index(this)で、クリックされたliを指定する var li_index =link.index(this); $('.box_load>li').removeClass('active'); $('.load_'+li_index).addClass('active'); $('.box_load>li').hide(); $('.box_load >li.active').show(); //もし.boxに「active」というクラスがあったら if(box.hasClass('active')){ box.removeClass('active'); box_cover.removeClass('active'); close.removeClass('active'); $('.box_load>li').removeClass('active'); }else{ // もしないなら box.addClass('active'); box_cover.addClass('active'); close.addClass('active'); } }); //box_coverをクリックしたとき box_cover.on('click',function(){ box.removeClass('active'); box_cover.removeClass('active'); close.removeClass('active'); $('.box_load>li').removeClass('active'); }); //closeをクリックしたとき close.on('click',function(){ box.removeClass('active'); box_cover.removeClass('active'); close.removeClass('active'); $('.box_load>li').removeClass('active'); }); // 矢印をクリックした時 // fade_speedは切り替わりの速さ var fade_speed = 300; arrow_rigth.on('click',function(){ var load_active = $('.box_load >li.active'), // [right].box_load >li.activeの次のli、それがない場合は最初のliに戻る right = load_active.next('li').length?load_active.next('li'):$('.box_load >li:first'); // .box_load >li.activeをfaceOutしてクラスを削除、 // [right]をfadeInしてクラスを付ける $('.box_load >li.active').fadeOut(fade_speed).removeClass('active'); right.fadeIn(fade_speed).addClass('active'); }); arrow_left.on('click',function(){ var load_active = $('.box_load >li.active'), // [left].box_load >li.activeの前のli、それがない場合は最後のliに戻る left = load_active.prev('li').length?load_active.prev('li'):$('.box_load >li:last'); $('.box_load >li.active').fadeOut(fade_speed).removeClass('active'); left.fadeIn(fade_speed).addClass('active'); }); }); </script> </html>

これをうまくくっつければ、希望通りの動きができると思っているのですが…

お手数ですが、みなさまのご教授をお待ちしております。
よろしくお願いいたします。

※一部タグを修正しました。(不要な文言削除)

javascript

1all_link[i]='oraclecard_'+i+'.html'; 23all_link[i]= +i+'.html';

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんなふうにするとラクです

javascript

1<script> 2var arrImage = [ 3 {src:"img/00.png",href:"0.html",sort:Math.random(),}, 4 {src:"img/01.png",href:"1.html",sort:Math.random(),}, 5 {src:"img/02.png",href:"2.html",sort:Math.random(),}, 6 {src:"img/03.png",href:"3.html",sort:Math.random(),}, 7 {src:"img/04.png",href:"4.html",sort:Math.random(),}, 8 {src:"img/05.png",href:"5.html",sort:Math.random(),}, 9 {src:"img/06.png",href:"6.html",sort:Math.random(),}, 10 {src:"img/07.png",href:"7.html",sort:Math.random(),}, 11 {src:"img/08.png",href:"8.html",sort:Math.random(),}, 12 {src:"img/09.png",href:"9.html",sort:Math.random(),}, 13 ]; 14arrImage.sort(function(x,y){ 15 return x.sort-y.sort; 16}); 17console.log(arrImage[0].src); 18console.log(arrImage[1].src); 19console.log(arrImage[2].src); 20</script>

組み込み

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var arrImage = [ 4 {src:"img/00.png",href:"0.html",sort:Math.random(),}, 5 {src:"img/01.png",href:"1.html",sort:Math.random(),}, 6 {src:"img/02.png",href:"2.html",sort:Math.random(),}, 7 {src:"img/03.png",href:"3.html",sort:Math.random(),}, 8 {src:"img/04.png",href:"4.html",sort:Math.random(),}, 9 {src:"img/05.png",href:"5.html",sort:Math.random(),}, 10 {src:"img/06.png",href:"6.html",sort:Math.random(),}, 11 {src:"img/07.png",href:"7.html",sort:Math.random(),}, 12 {src:"img/08.png",href:"8.html",sort:Math.random(),}, 13 {src:"img/09.png",href:"9.html",sort:Math.random(),}, 14 ]; 15 arrImage.sort(function(x,y){ 16 return x.sort-y.sort; 17 }); 18 [].forEach.call(document.querySelectorAll('.link_list li'),function(x,y){ 19 x.querySelector('a').setAttribute("href",arrImage[y].href); 20 x.querySelector('img').setAttribute("src",arrImage[y].src); 21 x.querySelector('img').setAttribute("alt",arrImage[y].src); 22 }); 23}); 24 25</script> 26<ul class="link_list"> 27<li><a href="01.html" id="link1"><img name="imgNumber1" src="img/01.png" alt="" width="160" height="255" border="0"></a></li> 28<li><a href="02.html" id="link2"><img name="imgNumber2" src="img/02.png" alt="" width="160" height="255" border="0"></a></li> 29<li><a href="03.html" id="link3"><img name="imgNumber3" src="img/03.png" alt="" width="160" height="255" border="0"></a></li> 30</ul>

投稿2019/01/23 04:31

編集2019/01/24 03:50
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HealingSalon104

2019/01/23 10:39

ご回答ありがとうございます。 無知で申し訳ないのですが、そのようにアトランダムに書きだされた要素を、どのようにhtml内に組み込めばよいでしょうか? また、ランダムに書きだされたものを、例にあげたモーダルウィンドウと組み合わせるにはどうしたらよいでしょうか? たぶん、ページの下部に書いてある、javascriptのリストタグを生み出すスクリプトにその要素をうまく組み合わせればよいのだと思いますが…… 申し訳ございませんが、もう少々教えていただければ幸いです。
yambejp

2019/01/23 10:50 編集

document.imgNumber1.src = arrImage[StartRandom(0)]; document.links[0].href = arrLink[nTemp]; ↓↓↓ document.imgNumber1.src = arrImage[0].src; document.links[0].href = arrImage[0].href; としてください(元ソースもちょっとかえました) 実際にはもう少し工夫したほうがよいですが・・・
HealingSalon104

2019/01/24 03:36

ご回答ありがとうございます。 以下のようにしてみました。 ■ ページ上部javascript ■ <script> var arrImage = [ {src:"img/00.png",href:"0.href",sort:Math.random(),}, {src:"img/01.png",href:"1.href",sort:Math.random(),}, {src:"img/02.png",href:"2.href",sort:Math.random(),}, {src:"img/03.png",href:"3.href",sort:Math.random(),}, {src:"img/04.png",href:"4.href",sort:Math.random(),}, {src:"img/05.png",href:"5.href",sort:Math.random(),}, {src:"img/06.png",href:"6.href",sort:Math.random(),}, {src:"img/07.png",href:"7.href",sort:Math.random(),}, {src:"img/08.png",href:"8.href",sort:Math.random(),}, {src:"img/09.png",href:"9.href",sort:Math.random(),}, ]; arrImage.sort(function(x,y){ return x.sort-y.sort; }); console.log(arrImage[0].src); console.log(arrImage[1].src); console.log(arrImage[2].src); var arrFlag = new Array(999,999,999); function Show(){ document.imgNumber1.src = arrImage[0].src; document.links[0].href = arrImage[0].href; document.imgNumber2.src = arrImage[1].src; document.links[1].href = arrImage[1].href; document.imgNumber3.src = arrImage[2].src; document.links[2].href = arrImage[2].href; } var nTemp, nLoop; function StartRandom(nIndex){ nLoop = 0; nTemp = Math.round(Math.random()*(arrImage.length-1)); if (nIndex != 0){ for (nLoop = 0; nLoop < nIndex ; nLoop++){ if (nTemp == arrFlag[nLoop]){ StartRandom(nIndex); } } } arrFlag[nIndex] = nTemp; return nTemp; } </script> ■ 該当部分html ■ <ul class="link_list"> <li><a href="01.html" id="link1"><img name="imgNumber1" src="img/01.png" width="160" height="255" border="0"></a></li> <li><a href="02.html" id="link2"><img name="imgNumber2" src="img/02.png" width="160" height="255" border="0"></a></li> <li><a href="03.html" id="link3"><img name="imgNumber3" src="img/03.png" width="160" height="255" border="0"></a></li> </ul> しつこくて申し訳ないのですが、 こちらをページ下部のjavascriptとマージする方法がわかりません。 もし、お分かりになれば、教えていただければ幸いです。
yambejp

2019/01/24 03:50

組み込みまで追記しました(hrefがおかしかったので直しました)
HealingSalon104

2019/01/25 04:25

ご丁寧にありがとうございました。 問題なく、望む動きをしました。 (モーダルウィンドウ部分は、jQueryのColorboxを使用してみました。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問