連続でランダムに画像を表示させる方法

前へ 次へ
このQ&Aのポイント
  • フェードで画像が切り替わるjQueryを使って画像を表示させたいです。
  • PHPを使用して連続でランダムな画像を表示させる方法を教えてください。
  • デモサイトを作成し、画像の順番をランダムにしたいと思いますが、うまく表示されません。
回答を見る
  • ベストアンサー

連続でランダムに画像を表示させたい

フェードで画像が切り替わるjQueryを使って画像を表示させています。 出てくる順番をランダムにしたいと思い、phpを記述しましたが、1枚目だけしか表示してくれません。 デモサイトがこちらです。 http://ijs.uh-oh.jp/demo/ ちなみにphpは、以下のように記述しました。 <figure id="fadein"> 　<?php $image=array( "image/photo01.jpg", "image/photo02.jpg", "image/photo03.jpg", "image/photo04.jpg", "image/photo05.jpg", ); $image = $image[rand(0, count($image)-1)]; echo '<img src=" '.$image.' " alt="">'; ?> </figure> 1枚だけでなく、ランダムで連続して表示させる方法をご教授ください。 phpは超初心者で自分なりに調べてみましたが、ギブアップしました(>_<)

  • xjptm
  • お礼率69% (25/36)
  • PHP
  • 回答数2
  • ありがとう数9

質問者が選んだベストアンサー

  • ベストアンサー
  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.1

この記述では読み直すごとにランダムで1枚出るようにしかなりませんね。 ご自分で実装されるよりもjQueryのプラグインを探したほうがいいと思いますよ。 http://alphasis.info/2011/08/jquery-cycle-random/

xjptm
質問者

お礼

教えていただだいたjQueryで希望通りのものが出来ました。 ご丁寧にありがとうございました。

その他の回答 (1)

  • agunuz
  • ベストアンサー率65% (288/438)
回答No.2

>1枚だけでなく、ランダムで連続して表示させる方法 それはサーバ側のphpじゃなくてクライアン側のJavaScript（jQuery）側で行うことです。 まずはjQueryのプラグインを探してください。で、そのプラグインで複数の画像ファイルを指定している記述をphpで（配列で持っているのをshuffleして）書き出すだけです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. PHP

関連するQ&A

  • 画像読み込みとランダム表示について。。。

    （まえおき）PHPを最近始めましたがちんぷんかんぷんで非常に困っています！とりあえずやってみよう！と分からないなりに進めてきましたが限界があり、脳細胞が溶けて死んでしまいそうなので質問させて頂きます。 （本題）Dream Weaverで簡単なウェブページを作成中です。画像を３枚ぐらいをランダム表示させようと進めています。 （疑問１）SQLが使えないのでDream Weaver内の同列に画像ファイルを作り、そこから読み込めるようにしようと考えましたが、可能なのでしょうか？ （疑問２）<?php srand((float) microtime() * 10000000); $input = array("Neo", "Morpheus", "Trinity", "Cypher", "Tank"); $rand_keys = array_rand($input, 2); echo $input[$rand_keys[0]] . "\n"; echo $input[$rand_keys[1]] . "\n"; ?> ↑上記のサンプルを手にいれたので $input = array("Neo", "Morpheus", "Trinity", "Cypher", "Tank"); のNeo　Morpheus　Trinity　Cypher　Tank　の箇所に画像を入れたらいけるのでは？と思い image/photo.jpg.... と記入していきましたがエラーになってしまいました。どうやったらテキストの代わりに画像入れられるのでしょうか？？ （締め）基本をあまり理解していませんのでとんでもなく意味不明な質問なのかもしれませんが、どうぞお助けください。お願いします。。。　

    • ベストアンサー
    • PHP
  • 画像をランダムに表示したい

    var image = new Image[2]; // おまけ画像の読み込み image[0].src = "aaaa1.jpg"; image[1].src = "bbbb2.jpg"; // プレゼント画像を描画 int r=(int)(Math.random()*2); //ランダムに表示 context.drawImage(image[r], 0, 0); これだけでは、だめなのでしょうか!?

  • javascriptで画像のランダム表示設定

    いつもお世話になっております。 過去に類似した質問が挙げられてましたが、 解決に至らなかったので、 質問させて頂きます。 javascriptを使用して、 ３枚の画像をランダム表示されるように設定したいと思っております。 できれば、更新毎に常に異なる画像が表示されるようにしたいです。 ちなみに全体に適用ではなく、特定のボックスのみです。 こんな感じで現在は指定しております。 <div class="section1"> <img src="photo/xxx.jpg" alt="xxx" /> </div> ここのimgをランダム表示にしたいのですが、 どうも上手くいきません。 <script language="javascript"> <!-- // ランダムに画像を表示する img = new Array(); // 画像のアドレス img[0] = "photo/xxx.jpg"; img[1] = "photo/yyy.jpg"; img[2] = "photo/zzz.jpg"; n = Math.floor(Math.random()*img.length); document.write("<IMG src='"+img[n]+"' border='0'>"); document.write("</A>"); //--> </script> をbody内に挿入したのですが、 ダメでした。 ご指導の程宜しくお願い致します。 ちなみに当方、プログラムを自力で記述する能力が無いので、 できれば、ソースを明示して頂けると大変助かります。

  • ジャンル別にランダム画像を表示させるスクリプト

    タイトルの通り、ジャンル別にランダム画像を表示させるスクリプトを探しています。 イメージとしては、ジャンルAにはA1.jpg, A2.jpg, A3.jpg...のうち一つをランダム表示。 ジャンルBにはB1.jpg,B2.jpg,B3.jpg.....のうち一つをランダムで表示。 などなど複数のジャンルにおいて、画像をランダムに、１ページで表示させたいと考えています。（添付画像ご参照ください） "javascript 複数 ランダム 表示"などのキーワードで探したところ、 「複数の画像を重複せずに表示する」などのようなスクリプトでしたので、 新たに質問させていただきました。 PHPでも構いません。 もし知ってらっしゃる方がいましたらよろしくお願いいたします。

  • 背景画像のランダム表示

    お世話になります。 PHP勉強中です。 1.背景画像のランダム表示：bodyタグ内でなくdiv内の背景画像を変更したい。bottom right指定等施したいのでスタイルシートで書き出す？？ 2.確率を設定したい：1枚の基本画像が60％表示され、それ以外の複数の画像が40％で選択、その中で画像をランダムに設定したい。 3.使用する画像は同一フォルダ内にある、背景画像以外はいれない。今後枚数を増やしていく予定なので、ファイル名を1つずつ指定するのではなく、フォルダ内の画像を読んで、配列に・・・ と、やりたいことはあるのですが、どうやったらいいのやら・・・頭が混乱してます（汗） 私のサイトに訪問される方でjsをOFFにされている方が多少いらっしゃるので、どうせならPHPで！と意気込んでみたのですが・・・ もしよろしかったらご教授下さいませ。 よろしくお願い致します。 参考：現在設置のjsファイル <script> wall = new Array(); wall[0] = "./image/bg01.jpg"; wall[1] = "./image/bg02.jpg"; wall[2] = "./image/bg03.jpg"; wall[3] = "./image/bg04.jpg"; wall[4] = "./image/bg05.jpg"; wall[5] = "./image/bg06.jpg"; wall[6] = "./image/bg07.jpg"; wall[7] = "./image/bg08.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">div.mainTOP { background:url(' , wall[rnd] , ') no-repeat bottom right #FAFAFA; }</style>'); </script>

    • ベストアンサー
    • PHP
  • CSSで背景画像をランダムに表示させたいのですが

    CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか？ 背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。 <div class="main"> ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。 </div> スタイルシートの方では現在は .main { float:left; background-image:url(/image/top_bg01.jpg); background-repeat:no-repeat; min-width:736px; height:auto; border-right:1px solid #000000; } としており、このtop_bg01.jpgの部分の画像を top_bg01.jpg top_bg02.jpg top_bg03.jpg top_bg04.jpg top_bg05.jpg とランダムに表示させたいのですが、対応方法が分からずに困っています。 http://www.designwalker.com/2006/12/random-css.html はためしてみましたが、PHPがうまく対応できずに断念してしまいました。 どなた様か宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • XML画像データををHTMLで簡単に表示する方法

    下記のXML画像データををHTMLで簡単に表示する方法をご教授下さい。 <?xml version="1.0"?> <photos> <photo url="http://www.kahokanko.com/demo/10.jpg"/> <photo url="http://www.kahokanko.com/demo/19.jpg"/> <photo url="http://www.kahokanko.com/demo/31.jpg"/> </photos>

    • ベストアンサー
    • HTML
  • 画像のランダム表示

    初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var imgs = new Array; var n = 5; var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; imgs[3].src="image/004.jpg"; imgs[4].src="image/005.jpg"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>

  • 画像をランダム表示させたい

    画像を5枚横並びにランダム表示させたいです。 XHTMLとCSSでサイトを制作しようと考えています。 イメージフォルダに複数の画像データを格納、そこからアクセス毎にランダム（同じものが表示されないよう）表示。 画像をクリックすると指定したページにリンク。 下記URLページ右の真ん中あたりにある感じのものです。 http://picpi.net/main.html 方法としてはCGI、Javascriptなどいろいろあると思うのですが、まったくわからない人間です。 参考になるサイト、もしくは答えまで出して頂けると大変助かります。 以下、参考までにサーバ環境です。 perl5.8.、Ruby1.8.、Python2.4.、PHP4.4.、PHP5.1.、MySQL4.0.25、ColdFusion　が使えるそうです。

  • javascriptで画像をランダム表示させたい

    javascriptで画像をランダム表示させたいと思い、下記ソースを記述しました。 下記ソースでは、画像をランダムに1枚ずつ表示するようになっています。 今回、1枚ずつではなく、50枚ある画像を10枚ずつランダムに表示させたいと思っています。下記ソースから修整するにはどのような考え方になるのか教えていただけませんか？ 単純に、 "img/1.jpg", の部分を "img/1.jpg,img/2.jpg,img/3.jpg,img/4.jpg,img/5.jpg", としてみたのですが違うみたいですし、、。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>20110720test</title> </head> <body> <script language="JavaScript"><!-- myImageCnt = 5; myImage = new Array( "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg" ) myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する