• ベストアンサー

HTMLでスライドショー

パソコン初心者です。 今HTMLでスライドショーを作っています。任意の画像が100枚ありそ、その画像をランダムに表示をさせたいです。 img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; 　　　　　： 　　　　　： のように一枚ずつ画像を貼り付けないといけないのでしょうか？ もう少し楽な方法があれば教えてください。お願いします。

回答 全件
ベストアンサー
下記に「すねねぃる」というスライドショーを作成するソフトがあります。 …

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

  • ベストアンサー
  • saekikkt
  • ベストアンサー率60% (378/622)
回答No.1

下記に「すねねぃる」というスライドショーを作成するソフトがあります。 HTMLを作成してくれますので、そのHtmlを参考にされたら・・・ 但し、ランダムには、表示は、されませんのでランダムに表示するように工夫は、必要です。 画像の取り込みの箇所だけなら参考にできると思います。 すなねぃる http://www.forest.impress.co.jp/lib/inet/homepage/webalbum/snanail.html

siro81655260
質問者

お礼

ありがとうございます。さっそくDLして使ってみます。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. インターネット・Webサービス
  3. Webサービス・アプリ
  4. Youtube・ニコニコ動画・動画サービス

関連するQ&A

  • ちょっと変わったスライドショーを実現したいです

    ちょっと変わったスライドショーを作りたいのですが、 自分の技量では仕組みを考えつくことが出来ず、困っております。 どなたか下記のものが出来る仕組みをお教え頂けないでしょうか。 合計６枚のスライドショーです。 Aパート ・１枚目　固定でA.jpgを表示 ・２枚目、３枚目はB-1、B-2、B-3、B-4.jpgから２枚をランダムに表示 Bパート ・4枚目　固定でC.jpgを表示 ・5枚目、6枚目はD-1、D-2、D-3、D-4.jpgから２枚をランダムに表示 ※Bパートの6枚目のあとはAパートの１枚目に戻りリピート再生です。 ※2巡目以降、ランダム表示で1巡目と同じ画像が出ても構いません。 ※jquery-cycleのように指定した時間で画像を切り替え（切り替わり時にフェードイン、フェードアウト） 言葉にするのが難しいので、図をかいてみました。 なんとも手間がかかる仕様で申し訳ございません。 どなたかご教授をお願い致します！！

  • 簡単にスライドショーができるスクリプトはありませんか？

    簡単にスライドショーができるスクリプトはありませんか？ サーバ上にアップされている画像ファイルをスライドショーのように表示してくれるスクリプトなどはないでしょうか？ 単純にサイトにアップされているimgフォルダ内に「20100518」のように日付毎に区分されたフォルダ内のJPG画像を順番に表示していってくれるだけで良いです。 フォルダ階層は下記のようになっていて、imgフォルダの下にもう一階層のみです。 /img/20100401 /img/20100402 /img/20100518 /img/20100501 FTPで最新の日付フォルダの画像データをアップすると自動で反映されるか、 設定ファイル等を少し編集するのみのできるだけシンプルな方がありがたいです。 表示順とか切替時の演出には特にこだわっていません。 既にご存知のスクリプトとか、または実現する近道のアドバイスをお願いいたします。

    • ベストアンサー
    • HTML
  • PSPでランダムスライドショー

    PSP本体の機能で画像のスライドショーができますが、表示順が固定されてます。 ランダム表示でスライドショーしたいのですが、何か方法はありませんか？ 面倒な方法でも構いませんのでご教授ください。

  • Susieのスライドショーにて

    画像閲覧ソフトのSusieにて、 ある連番の画像を順番にスライドショーで閲覧したいのですが、 例えば a1.jpg a2.jpg a10.jpg a11.jpg というファイルがあったとすると、 これを名前順にスライドショー表示すると、 a1→a10→a11→a2 という順番で表示されてしまいます。 なんとか番号の順番そのまま（1→2→10→11） に表示させる方法はありませんでしょうか？

  • 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>

  • WEBサイトでのスライドショーについて教えてください

    お世話になります。WEBサイトでクリックするたびに画像が変わるスライドショーを他のページなどを参考にfunction prev()等を使って設置しました。 具体的にはこんな感じです <script type="text/javascript"> <!-- var n = 0; var m = 0; var m= new Array(); img[m++] = "010.jpg"; img[m++] = "011.jpg";(以下繰り返し) function prev() { if (--n < 0) { n = m - 1; } document.images['img1'].src = img[n]; } function next() { if (++n == m) { n = 0; } document.images['img1'].src = img[n]; } // --> </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()"が同じなのがいけないのかと思うのですが、上と下を区別する方法がわかりませんでした。 初心者のような質問で恐縮ですがご存知の方よろしくお願いします。

  • スライドショーを作れる言語を教えて

    こんなプログラムです ・OSはwindows XP ・フォルダをドラッグ＆ドロップで指定できる ・中にあるファイルのうちjpg/jpeg/pngだけをスライドショーして、他はスキップ ・画像表示の時間を0.1秒～5秒まで0.1秒刻みで設定できる ・画像と画像のあいだに非表示（真っ黒画面）を1～10秒のあいだで設定できる ・画像の大きさは任意の大きさのウィンドウ⇔全画面表示を選べる(ESCで全画面終了） ・画像の表示はウィンドウより小さいものはそのまま、大きいものは縮小して全部収まるようにする ・画像を表示する順番は名前⇔ランダムを選べる ・プログラムを終了するまで永遠にループする ・ボタンは　スライドショーの開始/一時停止/設定/全画面だけです 短いプログラムで、表示時間が0.1秒でもスムーズに動くくらい動作が軽いといいです。 どんな言語が適していますか？

  • スライドショーが出来ません。。

    web作成は全くの初心者で、今までいろんなサイトの見本のhtmlをコピペしてなんとか少しづつ形にになってきたのですが、どうしてもスライドショーができません、、、 こちらのサイト（http://kowaza.boo.jp/）の＜スライドショー＞　　*　 フェードインしながら次々と画像を表示　*　というのを参考に作ってみたのですが、全然スライドショーになりません。 何がいけないのか全く分からないのですが、どこかおかしなところがありましたら教えて下さい。どうぞよろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>スライドショーの実験</title> <script type="text/JavaScript"> <!-- var myspd = 200; 　　　　　　　　　　 var myx = 5; 　　　　　　　　　　　 var mypic = new Array("myp1","myp2","myp3");　　　 var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } //--> </script> </head> <body onLoad="mygo()"> <span style=" position:absolute ; top:20px ; left:20px ; z-index:1;"> <img src="top.jpg" width="300" name="myp1" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:40px ; left:50px ; z-index:2 ;"> <img src="before.jpg" width="300" name="myp2" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:60px ; left:80px ; z-index:3 ;"> <img src="after.jpg" width="300" name="myp3" border="0" style="filter:alpha(opacity=0);"></span> </body> </html>

  • jqureryスライドショーが上手くいきません。

    こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン　フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }

  • マイピクチャーのスライドショーの疑問

    パソコンはＸＰです。 マイピクチャー内のサブフォルダーで，スライドショーができるものとできないものがあります。 大体のフォルダーでは、左に画像のタスクが出て、 その中にスライドショーをする、があるのですが、 一部フォルダーで、画像のタスクが表示されないものがあります。 表示されるのもされないのもどちらもＪＰＧの画像なので、原因がわかりません。 原因に心当たりのあるかたおられたら教えていただけますか？どうぞよろしくお願いします。

MFC-J7100CDWのスキャン先が不明な件
このQ&Aのポイント
  • MFC-J7100CDWを使用してPCにスキャンする際、保存先ファイルが分からない状況です。スキャンしたファイルはどこに保存されるのでしょうか？
  • Windowsを使用してMFC-J7100CDWでスキャンしたファイルの保存先がわかりません。無線LANで接続している状況です。
  • MFC-J7100CDWでスキャンしたファイルの保存先が不明です。無線LAN接続しているWindows環境での問題です。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する