#カード占いのコンテンツを作成しています。
目指していること
①そのページにアクセスする度に何枚かあるカード画像から、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'; 2↓ 3all_link[i]= +i+'.html';
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/23 10:39
2019/01/23 10:50 編集
2019/01/24 03:36
2019/01/24 03:50
2019/01/25 04:25