スライドショーにフェード効果と再ランダム表示を実装したい

2023/08/16 06:33

このQ&Aのポイント

スライドショーにフェード効果と再ランダム表示を実装したい。重複選択を回避しつつ、クロスフェードやフェードイン・アウトを利用したい。初回再生時にはランダムに取得した画像を表示し、リピート再生時にもう一度ランダムに画像を読み込んで表示させたい。
現在の状況は、[A]→[B1]→[B2]→[C]の順番で再生している。[A]と[C]は固定の指定画像を表示し、[B1]と[B2]はB1～5.jpgの中からランダムに表示している。重複選択は回避している。
上記の状況にさらに、クロスフェードやフェードイン・アウトを実装したい。初回再生時にはランダムに取得した画像を表示し、リピート再生時にもう一度ランダムに画像を読み込んで表示させたい。HTMLのスクリプト内でこれらの要件を実現するための処理が記述されている。

ベストアンサー

スライドショーにフェード効果と再ランダム表示を…

2012/02/16 15:29

前回、重複しない画像選びを教えて頂き、その後の続きを頑張ってみましたが策が尽きてしまいました。皆様のお力をお借りできないでしょうか。【※現在の状況】・[A]→[B1]→[B2]→[C]の順番で再生・[A] [C]は固定（指定）画像を表示、[B1] [B2]はB1～5.jpgの中からランダムに表示し、重複選択を回避しています。上記にさらに下記機能をプラスしたいと思っております。【実現したいこと】・クロスフェード（またはフェードイン、アウト）を実装したい。・初回再生時にランダムで取得した画像を、リピート再生時にもう一度ランダム読込み表示させたい。形式は上記内容を踏まえた物であれば、まったく違うものになっても構いません。どうか助けて頂けないでしょうか。よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SLIDESHOW</title> <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.js"></script> <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js"></script> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </head> <body onload="img_move()"> <div> <img src="images/A.jpg" name="show" width="300" height="250" > </div> </body> </html>

soapon
お礼率100% (3/3)

JavaScript
回答数1
ありがとう数5

みんなの回答 （1）
専門家の回答

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

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2012/02/16 16:17 回答No.1

こんにちは。この前のbgSwitcherを使ったものであればランダム画像の初期化ができるように作ってみました。前回ファイル等準備していたら締切に間に合わなかったのでうまく行ったか気になっていました。これでイメージとあっているなら使ってやってください。動作サンプルの一番下からカスタマイズ後のjquery.bgSwitcher.jsがダウンロードできます。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7308681/ プラグインを以下のようにちょっとカスタマイズしました。最後の画像まで選択され、最初に戻る前にcallbackReset関数を呼ぶようにカスタマイズ。 callbackReset関数内で再度画像をランダムに呼出してsetImagesを呼ぶことにより画像を変更する。 ==== JS部分 $().ready ( function() { var imgA = './images/samplea.png'; var imgC = './images/samplec.png'; var imgBs = new Array(); imgBs[0] = './images/sample1.png'; imgBs[1] = './images/sample2.png'; imgBs[2] = './images/sample3.png'; imgBs[3] = './images/sample4.png'; imgBs[4] = './images/sample5.png'; var imgB = setImgB(); var ctrl = $('#test').bgSwitcher ({ images : [ imgA, imgB[0], imgB[1], imgC ], interval : 1000, fadeSpeed : 1000, callbackReset : function() { // 画像を再設定(プラグイン内からの呼び出し) // 引数は画像パス配列と変更したいindex // この場合は1,2番目の画像を入れ替える // setImgB()はランダムに抽出した2枚分の配列を返してくる関数 ctrl.setImages ( setImgB(), new Array(1,2) ); } },true ).data('bgSwitcher'); function setImgB() { var imgs = new Array(); var n1 = Math.floor(Math.random()*imgBs.length); while ( true ) { var n2 = Math.floor(Math.random()*imgBs.length); if ( n1 != n2 ) break; } imgs[0] = imgBs[n1]; imgs[1] = imgBs[n2]; return imgs; } });

質問者

お礼 2012/02/17 09:49

LancerVIIさま前回の質問から気にかけていただいていたなんて・・ありがとうございます。 bgSwitcherを使えたら一番の理想型だったので大変感激です！ついに完成いたしました（涙）あれからいろんなJSを探してみたり、本を買って読んでみたりしていたのですがやはりどうしてもうまくいかず、再度投稿することになってしまったのです。 ※でも副作用効果でJSプログラムに馴染めることが出来ました＾＾重ねてお礼申し上げますが、貴重なお時間を使って頂き本当にありがとうございました！！

関連するQ&A

スライド写真で２、３枚目をランダムで表示させるには
bgSwitcherを使用してフェードインアウトするスライドショーを作りました。 [A固定]→[Bランダム]→[Bランダム]→[C固定] １枚目、４枚目は指定画像に差替え表示できていますが、２枚目、３枚目が同じ画像を表示してしまい、繰り返し再生しても再度ランダムに選んでくれず、初めに読み込んだ画像のままでした。【実現したいこと】 ●imgBをランダム読み込みし、２枚目、３枚目で同じ画像が選ばれないようにしたい ●2巡目以降も、再生のたびにランダム処理を実施するどなたか、上記のものが実現できるように出来ないものでしょうか。どうぞよろしくお願いいたします。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.bgSwitcher.js" type="text/javascript"></script> <script language="javascript">  </script> <style type="text/css"> .bg { width: 160px; height: 160px; padding: 20px; line-height: 1.6; } </style> </head> <body> <div> <div id="bgSwitch-fadeOut" class="bg"> <p>テキスト</p> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
<img src"○.jpg">の○をランダムに！
1.jpgから30.jpgの30枚の画像はimagesという名のフォルダにあり、それらの画像をJavaScriptで画像を1枚目からランダムにフェードインするものを作りたく、 http://asamuzak.jp/html/302を参考にして、 2枚目からランダムにフェードインすることはできました。しかし、1枚目が必ず同じ画像が表示されてしまいます。 body内の<img src"1.jpg" id=""> の部分が表示される1枚目のようです。 1.jpgを2.jpgにすると2.jpgが最初に表示されます。 1枚目からランダムにフェードインするものを作るには、この<img src"1.jpg" id="">を<img src"ランダムな整数.jpg" id=""> にすればいいのでは？　と思いました。自分が考えたコードは、下記コードの場合の動作は、 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script language="JavaScript">  </script> </head> <body> <img src="../images/1.jpg" /> </body> </html> 1.jpgが毎回必ず表示されます。ランダムな整数を取得できるJavaScriptを作り、 var n = Math.floor((Math.random() * 29))+1; その整数を上記コードの <body> <img src="../images/1.jpg" /> </body> の部分を <body> <img src="../images/n.jpg" /> </body> とvar nを入れてやれば 1～30のランダムな整数が入ってページを更新するたびに画像が変わると考えました。 <img src="../images/n.jpg" />の書き方を直せばいいと思うのですが、どのようにしたらいいのでしょうか？　よろしくお願いします。
- ベストアンサー
- JavaScript
スライドショーについて
ど～もど～も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな？私も同じような設計で悩んでてピッタシと思うのがやっとあった！と思ってたら・・・jQueryじゃないみたい（泣）私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。ソースを貼っておくのでよろしくお願いします。ｈｔｍｌファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css">  <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript>　jQuery.noConflict();　</SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript>　jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0　});});　</SCRIPT>  <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> </HEAD><BODY><DIV id=slide class=galleryview>  <DIV id=gallery_box>  <DIV class=panel><IMG alt="○○○　src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV>   <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL> </DIV> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。困っているので、お願いします。
- 締切済み
- JavaScript
ランダム表示とリンクの貼り付け
数百の画像を、ランダムにダブらないで表示させるのはできたのですが（画像名は整理しやすい0000.jpg～0100.jpgとしました） <script type="text/javascript"></script> <body> <img src="*" name="imgs0"> </body> 一つ一つの画像にそれぞれリンクを貼りたいと思います。どこに何を入れたらいいでしょうか？それとランダムにする画像を３つくらい並べたいのですが <img src="*" name="imgs0"> だと１つしかランダムにならずに、あとの２つは画像が表示されません。何を変えたらいいでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
javaScriptでリンク画像のランダム更新表示
画像をランダム表示する方法はわかったのですが、各画像にリンク設定したいのと、各画像の大きさをCSSのwidthやhighのように調整する方法をご教授ください。 <html> <body> <script type="text/javascript"> </script> </body> </html>
- 締切済み
- JavaScript
ランダム画像＆マウスオーバーで画像切り替え
こんばんは。下記内容を外部JSファイルにしたいのですがやり方がいまいちわかりません。 <script language="javascript">  </script> どなたかご教授頂けると助かります。よろしくおねがいいたします。
- ベストアンサー
- JavaScript
jqueryのスライドショー。htmlに画像1枚で
jquery-1.5.1.min.jsを使ってjpg画像をランダムにスライドショーさせるプログラムで、下記ポイントを満たしたプログラムへ変えたいです。・scriptが機能しない場合には画像がちゃんと表示される・html上にスライドショーに使う画像を並べない（下記コード参考＝【画像多いバージョン】）・修正するコードは【画像1枚バージョン】よろしくお願いします。【画像1枚バージョン】 <script type="text/javascript"> $(function(){ 　var elm = $(".fadein"); 　elm.children("img").hide(); 　(function(){ 　　var img = elm.children("img:hidden"); 　　elm.children("img:not(hidden)").fadeOut(1000); 　　$(img.get(Math.floor(Math.random() * img.length))).fadeIn(500); 　　var id = setTimeout(arguments.callee, 5000);　　　})(); }); </script> <div class="fadein"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> </div> 【画像多いバージョン】 <script type="text/javascript"> imgLength = 20; firstInt = 1; imgChangeSpeed = 5000; imgExtension = ".jpg"; imgDirectory = "img/"; randomInt = firstInt + 1; $(function(){ var t = setInterval(loadImg, imgChangeSpeed); function loadImg(){ $("#gallery").children("img").animate({'opacity':'0'}, 0) $("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension }).animate({'opacity':'1'}, 1000); if(randomInt < imgLength){ randomInt = parseInt(randomInt) + 1; } else{ randomInt = 1; } } }); </script> <div id="gallery"> <img src="img/1.jpg" /> </div>
- ベストアンサー
- JavaScript
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"></script> </body> </html>
- ベストアンサー
- JavaScript
WEBサイトでのスライドショーについて教えてください
お世話になります。WEBサイトでクリックするたびに画像が変わるスライドショーを他のページなどを参考にfunction prev()等を使って設置しました。具体的にはこんな感じです <script type="text/javascript">  </script> <img name="img1" src="001.jpg" alt=""> <form action="#"> <input type="button" value="▼" onclick="prev()"><input type="button" value="▲" onclick="next()"> </form> これは順調に稼動しました。その後同じページ（上記の下側）に、最初の画像を「201.jpg」、スライドショーで表示させたい画像を「210.jpg」「211.jpg」に変更して同じものを記述しました。画面上はきちんと表示されるのですが下に設置したほうの▼▲をクリックすると「201.jpg」が「210.jpg」に変わるのではなく、上に設置した「010.jpg」「011.jpg」に画像が変わります。onclick="prev()"が同じなのがいけないのかと思うのですが、上と下を区別する方法がわかりませんでした。初心者のような質問で恐縮ですがご存知の方よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
画像のランダム表示について
ある方のスクリプトを参考にさせて頂いたのですが、色々なサイトで調べてみると、どうも他にも色々な方法があるようで、迷っています。私が書いたスクリプトは、以下の物なのですが、直した方が良い所や、または、お勧めの方法を教えてください。 <SCRIPT language=JavaScript>  </SCRIPT> <SCRIPT language=JavaScript>  </SCRIPT> これを<BODY></BODY>の間に入れて表示させる物です。
- ベストアンサー
- JavaScript