- ベストアンサー
Webページ 画像切替する場合のタグ表記について
- 初めてWebページ作成する者が、JavaScriptを使用して画像を自動的に切り替える方法について質問しています。
- 現在、main.jpgという画像を切り替えるために、main01.jpg、main02.jpg、main03.jpgの3つの画像を使用したいと考えています。
- 質問者は、main01.jpg、main02.jpg、main03.jpgの3つの画像をリスト形式で表示するためのHTMLコードを教えてほしいと求めています。
- kero_kero_
- お礼率16% (10/59)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
一般的には、このスライダーなどが人気がありますね。 参考URLをのせますが、「Nivo Slider 使い方」なんかで調べると、わかりやすくいっぱいでてくると思いますよ。他の回答者さんからの回答にもうすでにでていますが、javascriptのjqueryというものです。
- 参考URL：
- http://nivo.dev7studios.com/
その他の回答 (2)
- 4017B
- ベストアンサー率73% (1341/1821)
いまいち要領を得ないんですが…。とりあえず「JavaScript スライドショー」でGoogle検索すれば、無料のサンプル等がかなり沢山出て来ると思います。 最近は画像切り替えは、フェードイン/アウトなどの効果を付ける事が一般的になったので。JavaScript単体で処理する事は希で、通常は「jQuery」と呼ばれるJavaScriptの拡張汎用スクリリプトを併用する手法が主流です。合わせて調べてみて下さい。 単純にTOP画像などを時間で順次、切り替え表示させるだけなのなら、「jQuery Cycle Plugin」という物が比較的簡単に導入出来て便利です。 ＞http://jquery.malsup.com/cycle/ P.S. 例文のソースコードをどうやれば良いのかなんて、実際にJavaScriptを書いた本人じゃないと分らないですよ？ HTMLコードと違って、JavaScript（jQuery）は純然たるプログラムなので。例えば「画像切り替え」という目的を実施するために、何か特定のHTMLタグの様なものが有る訳では無いので。どういった手段で目的を達するのかは、それを書いた本人しか分らないので。
- Tarepanda_club
- ベストアンサー率72% (16/22)
はじめまして。 <ul>はCSS要素としてのリストなので切り替え画像の(たぶん)配列要素にするのは無理じゃないでしょうか。 Javascriptで画像を切り替える簡単なスクリプトを書いてみました。 切り替え画像は配列に入れてkero_kero_さんのおっしゃる「リスト」っぽくしてみました。 お望みの答えではないかもしれませんが。 (1)画像をクリックするとランダムに画像が切り替わる <html> <head> <title>test</title> </head> <script language="JavaScript"> <!-- var img = new Array; img[0] = "./img/main.jpg"; img[1] = "./img/main01.jpg"; img[2] = "./img/main02.jpg"; img[3] = "./img/main03.jpg"; function imageChange() { n = Math.floor(Math.random()*img.length); document.getElementById("main").src=img[n]; } //--> </script> <body bgcolor="#ffffff"> <div id="contents"> <div id="main_area"> <p><img id="main" src="img/main.jpg" width="580" alt="" onClick="imageChange()"/></p> </div> </div> </body> </html> (2)ページを読み込むたびにランダムに画像が切り替わる【(1)の<body ～ </body>を書き換えてください】 <body bgcolor="#ffffff" onLoad="imageChange()"> <div id="contents"> <div id="main_area"> <p><img id="main" src="img/main.jpg" width="580" alt="" /></p> </div> </div> </body> (3)画像をクリックするとランダムに画像が切り替わる【(1)のfunction～{…}を書き換えてください】 n=0; function imageChange() { n ++; if(n==4) n=0; document.getElementById("main").src=img[n]; } どうでしょうか？ちがっていたらごめんなさい。
