複数画像のランダム複数表示（秒で切り替え）

締切済

質問者：yako_k
質問日時：2014/05/13 14:57
回答数：3件

いつもお世話になっております。
JavaScript初心者です。

今回、複数ある画像をランダム表示することになり、いろいろと検索してみたのですが、なかなかうまくいきません。

今回の仕様は以下の通りです。
・総画像数：20枚
・表示画像数：5枚（20枚がランダム表示）
・5秒ごとに切り替え
・重複表示不可
・<body>タグ内はテンプレートとなっているため、記入不可能

上記がすべて叶うサンプルを見つけることができませんでした。
ご教示いただけましたら幸いです。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2014/05/19 10:50

こんにちは。

　ANo1、2です。

＞「test_image」という白画像が表示されます
画像要素のaltに設定している「test_image」が表示されているものと思われます。
（スクリプトのaltを設定する文字を変えてみることで、確認できます）
要は、画像が表示できないのでブラウザが代替としてalt属性を表示しているのではないでしょうか。

原因としては
　1）画像指定のURLが間違っている、または、画像データが壊れているなど
　2）画像の読み込みに時間がかかっていて、まだ表示できない状態である
等が考えられます。

ANo1にも書きましたが、2）への対処方法としては最初に画像をプレロードしておく方法があります。
「画像　プレロード」などをキーに検索してみてください。

前回のご質問ではHTMLが「テンプレート」とのみ記されておりどれだけの自由度があるのか不明でしたが（今でも不明ですが）、HTML内に画像要素を記述できると仮定し、かつ、「次の回に同じものを表示をしない」という制御も不要として、以下のような考え方もありかと。

・スクリプトは単純に画像要素をシャッフルしているだけです。
・最初の5個のみの表示はCSSで行っています。（CSS3に対応していないブラウザでは全部表示されますが）

*補足のように画像が表示されない場合は、CSSのdisplay;noneの部分を外してご確認ください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#hoge img{ width:150px; height:100px; padding:1px; }
#hoge img:nth-child(n+6){ display:none; }
</style>

<script type="text/javascript">
window.onload = function(){

var target = document.getElementById("hoge");
var images = target.getElementsByTagName("img");
var i, imgs = [];
for (i=0; i<images.length; i++) imgs[i] = images[i];

setInterval(function(){
　shaffle(imgs);
　for(var i=0; i<imgs.length; i++) target.appendChild(imgs[i]);
}, 5000);

function shaffle(a){
　var n = a.length;
　while(n){
　　var j = Math.random()*n | 0;
　　var t = a[--n];
　　a[n] = a[j];
　　a[j] = t;
　}
}

}
</script>
</head>
<body>

<div id="hoge">
<img src="img/photo00.jpg" alt="test_image1">
<img src="img/photo01.jpg" alt="test_image2">
<img src="img/photo02.jpg" alt="test_image3">
<img src="img/photo03.jpg" alt="test_image4">
<img src="img/photo04.jpg" alt="test_image5">
<img src="img/photo05.jpg" alt="test_image6">
<img src="img/photo06.jpg" alt="test_image7">
<img src="img/photo07.jpg" alt="test_image8">
<img src="img/photo08.jpg" alt="test_image9">
<img src="img/photo09.jpg" alt="test_image10">
<img src="img/photo10.jpg" alt="test_image11">
</div>

</body>
</html>

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2014/05/14 10:29

ANo1です。

今頃気が付くおバカなわたし。

＞重複表示不可
は、一回の表示内に同じものがないって意味ね。
次の表示の時は重複してもよいってことですね。
それならもっと簡単だし、そのくらいのサンプルなら検索すればいろいろ見つかるはずですよ。

No1の例は、「次の回の表示には、現在表示中の画像は表示されない（連続表示しない）」という条件で考えてしまったのでの、いらないことをいろいろしてますね。（~_~;）

- 0
- 件

通報する

この回答へのお礼

fujillin様、こんにちは。
このたびは丁寧なご回答、ありがとうございました。

NO1とあわせてお礼させていただいております。
よろしくお願いします。

通報する

お礼日時：2014/05/16 16:59

No.1

回答者： fujillin
回答日時：2014/05/14 09:10

こんにちは。

＞上記がすべて叶うサンプルを見つけることができませんでした
通常公開されているものは一般化された仕様のものがほとんどですから、個別の仕様にピッタリのものを探しても見つかる可能性は低いです。
似たようなものは、探せばたくさん見つかると思いますので、それら（の考え方）を組み合わせたり。カスタマイズするか自作したほうが早いでしょう。

＞<body>タグ内はテンプレートとなっているため
といっても、対象とするHTML構造について何も提示されていないのでなんともわかりませんが…

そもそも、表示に拘束条件があるので「ランダム」とは言えないのではないでしょうか。
全セットの一通りが順に表示されるようにするのか、2回連続しないだけでバラバラでいいのかなど、条件がよくわからないけれど、勝手に後者と決めつけて…

ごく簡単なそれらしきものをご参考までに。
* 最初に画像のプレロードをしたほうが良さそうですが省略しています。

（インデントは全角空白になっています）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#hoge img{width:150px; height:100px;padding:1px;}
</style>

<script type="text/javascript">
window.onload = function(){

//画像URLデータ
var imageURL = [
"img/photo00.jpg","img/photo01.jpg","img/photo02.jpg","img/photo03.jpg","img/photo04.jpg",
"img/photo05.jpg","img/photo06.jpg","img/photo07.jpg","img/photo08.jpg","img/photo09.jpg",
"img/photo10.jpg","img/photo11.jpg","img/photo12.jpg","img/photo13.jpg","img/photo14.jpg"
];
var dispNum = ; // 表示画像数
var id = "hoge"; // 表示用親要素のid

var imageON = [], elements = createImg(dispNum);
display();
setInterval(display, 5000);

//画像入れ替え表示（src属性書換え）
function display(){
　shaffle(imageURL);
　imageURL = imageURL.concat(imageON);
　imageON = [];
　for(var i=0; i<dispNum; i++){
　　imageON.unshift(imageURL.shift());
　　elements[i].src = imageON[0];
　}
}

//配列をシャッフル
function shaffle(a){
　var n = a.length;
　while(n){
　　var j = Math.random()*n | 0;
　　var t = a[--n];
　　a[n] = a[j];
　　a[j] = t;
　}
}

//id要素内に画像要素を作成
function createImg(n){
　var elm = [];
　var target = document.getElementById(id);
　var e = document.createElement("img");
　e.alt = "test_image";
　for(var i=0; i<n; i++){
　　var t = e.cloneNode(true);
　　target.appendChild(t);
　　elm.push(t);
　}
　return elm;
}
}
</script>
</head>

<body>

<div id="hoge"></div>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

fujillin様、こんにちは。
このたびは丁寧なご回答、ありがとうございました。
NO1と2あわせてのお礼になることをご容赦ください。

さっそくいただいたものを試させていただき…できました！
理想的な動作です。感激です。
ありがとうございます！！

しかしながら、時々、表示されない画像が現れてしまうようです。
（「test_image」という白画像が表示されます）
考えていただいた「次の回の表示には、現在表示中の画像は表示されない（連続表示しない）」のためでしょうか…？
（「重複表示不可」につきましてはお察しの通り、「一回の表示内に同じものがない」という意味です。わかりにくくて失礼しました）

そこでサンプルが他にも見つかるはずというお言葉に従いがんばって探したのですが、やはりぴったりなのは見つからず…。
サンプルをカスタマイズするには、javascript初心者すぎて力及ばず…。

もしfujillin様のお時間が許すようであれば、画像が常に5枚表示できるよう、もう少しお力をお借りできませんでしょうか。
よろしくお願い申し上げます。