Javascriptを使用したスライドバナーについて教えてください

前へ 次へ
このQ&Aのポイント
  • 現在ECサイトを構築しておりまして、TOPページの一定の場所の中で画像が自動でスライド、もしくはフェードイン・アウトで切り替わるバナーを設置したいと思っています。
  • 各画像にはそれぞれ別のリンク先を設定したいのですが何か参考になるサイトや方法などございませんでしょうか？
  • あくまでもFLASHではなくJavascriptで行いたいので宜しくお願いいたします。
回答を見る
  • ベストアンサー

Javascriptを使用したスライドバナーについて教えてください

現在ECサイトを構築しておりまして、TOPページの一定の場所の中で画像が自動でスライド、もしくはフェードイン・アウトで切り替わるバナーを設置したいと思っています。 似たようなイメージのものを設置しているサイトさんのソースを覗いたりしているのですがJavascriptについて詳しくはないので導入や設定の方法が見出せず困っております。 各画像にはそれぞれ別のリンク先を設定したいのですが何か参考になるサイトや方法などございませんでしょうか？ 自動や手動で画像が切り替わるスライドショーなどは多数見つけたのですが、リンクの設定などに触れているものが見つからなかったのでこちらに投稿させていただきました。 あくまでもFLASHではなくJavascriptで行いたいので宜しくお願いいたします。

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

  • ベストアンサー
回答No.6

＃４～５です。ねぼけてまちがえてました ただしくは、 　s./*@if(1) filter = 'alpha(opacity='+　this.op +')' @else @* 　　/opacity = (this.op / 100) /*@end@*/; を 　s./*@if(1) filter = 'alpha(opacity='+　this.op +')' @else@*/　opacity = (this.op / 100) /*@end@*/; でした。 ”きょうみ”は、ないかもしれませんが、ごくいちぶのかぎられたかたの ために(?)みじかくしてみました。^^; もっとみじかくできるはずです。 接頭語として、 「２３事務系ＯＬですぅ。もっと短くしたのですが・・」 と、さいしつもんすると、きそってみじかくしてくれるとおもいます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> ul{width:400px;height:200px;list-style:none;border:1px #888 solid;overflow:auto;margin:0;padding:0} li a img {border:0px none;width:400px;height:200px;} </style> <body> <ul id="menu"> <li><a href="htp:x0.jp"><img src="./img/0.gif" alt="*"></a></li> <li><a href="htp:x1.jp"><img src="./img/1.gif" alt="*"></a></li> <li><a href="htp:x2.jp"><img src="./img/2.gif" alt="*"></a></li> <li><a href="htp:x3.jp"><img src="./img/3.gif" alt="*"></a></li> <li><a href="htp:x4.jp"><img src="./img/4.gif" alt="*"></a></li> </ul> <script type="text/javascript"> //@cc_on function autoChanger(e,i0,u,i1){ e=document.getElementById(e); var t=0,s=e.style,c=0,o,p,q,r;s.overflow='hidden',s.position='relative',i0=i0||3000,u=u||20,i1=i1||50; while(o=e.childNodes[c])if('LI'==o.nodeName)o.style.position='absolute',c++;else e.removeChild(o);W(o=100/u); function C(){x=[0,e.clientWidth,0,-e.clientWidth][r=Math.random()*4|0],y=[-e.clientHeight,0,e.clientHeight,0][r]; S(e.appendChild((vx=-x/u,vy=-y/u,c=u,p=0,q=e.firstChild,s=q.style,L(),q)))} function S(){t=setInterval(function(){L();if(0==c--)return W();if(c)x+=vx,y+=vy,p+=o; else p=100,sx=sy=0},i1)} function W(){clearInterval(t),t=setTimeout(C,i0)} function L(){s./*@if(1)filter='alpha(opacity='+p+')'@else@*/opacity=p/100/*@end@*/,s.top=y+'px',s.left=x+'px'} } autoChanger( 'menu', 2000, 50, 30 ); </script>

その他の回答 (5)

回答No.5

ていせい。このへんを、それに。 s./*@if(1) filter = 'alpha(opacity='+ this.op +')' @else@*/ sopacity = (this.op / 100) /*@end@*/;

回答No.4

っふぅ～　ちかれたあ～。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> ul { 　width: 400px; 　height: 200px; 　list-style: none; 　border:1px #888 solid; 　overflow: auto; 　margin: 0; 　padding : 0; } li a img { 　border : 0px none; 　width　: 400px; 　height : 200px; } </style> <body> <ul id="menu"> 　<li><a href="#"><img src="./img/0.gif" alt="*"></a></li> 　<li><a href="#"><img src="./img/1.gif" alt="*"></a></li> 　<li><a href="#"><img src="./img/2.gif" alt="*"></a></li> 　<li><a href="#"><img src="./img/3.gif" alt="*"></a></li> 　<li><a href="#"><img src="./img/4.gif" alt="*"></a></li> </ul> <script type="text/javascript"> //@cc_on var AutoChanger = function () { 　this.init.apply( this, arguments ); }; AutoChanger.prototype.init = function ( targetId, interval, step, interval2 ) { 　var e = document.getElementById( targetId ); 　var cnt, o, s; 　 　if( !e ) return false; 　 　e.style.overflow = 'hidden'; 　e.style.position = 'relative'; 　 　this.e = e; 　this.interval = interval || 3000; 　this.step = step || 20; 　this.interval2 = interval2 || 50; 　this.timerId = null; 　this.o = 100 / this.step; 　 　for( cnt = 0; o = e.childNodes[ cnt ]; ) { 　　if( 1 == o.nodeType && 'LI' === o.nodeName ) { 　　　s = o.style; 　　　s.position = 'absolute'; 　　　s.top = '0px'; 　　　s.left = '0px'; 　　　cnt++; 　　} else 　　　e.removeChild( o ); 　} 　this.max = cnt; 　this.wait(); }; AutoChanger.prototype.wait = function() { 　timerId = setTimeout( (function ( that ) { 　　return function ( ) { 　　　that.change(); 　　}; 　})( this ), this.interval ); }; AutoChanger.prototype.change = function () { 　var r = Math.floor( Math.random() * 4 ); 　 　this.sx = [ 0, this.e.clientWidth, 0, -this.e.clientWidth ][ r ]; 　this.sy = [ -this.e.clientHeight, 0, this.e.clientHeight, 0 ][ r ]; 　this.vx = -this.sx / this.step; 　this.vy = -this.sy / this.step; 　this.cnt = this.step; 　this.op = 0; 　this.target = this.e.firstChild; 　this.loop(); 　this.e.appendChild( this.e.firstChild ); 　this.target = this.e.lastChild; 　this.start(); }; AutoChanger.prototype.start = function ( ) { 　this.timerId = setInterval( (function ( that ) { 　　return function ( ) { 　　　that.loop(); 　　}; 　})( this ), this.interval2 ); }; AutoChanger.prototype.stop = function ( ) { 　this.timerId && clearInterval( this.timerId ); 　this.timerId && clearTimeout( this.timerId ); 　this.timerId = null; }; AutoChanger.prototype.loop = function ( ) { 　var s = this.target.style; 　s.top = (this.sy | 0) + 'px'; 　s.left = (this.sx | 0) + 'px'; 　s./*@if(1) filter = 'alpha(opacity='+　this.op +')' @else @* 　　/opacity = (this.op / 100) /*@end@*/; 　if( 0 == this.cnt-- ) { 　　this.stop(); 　　this.wait(); 　　return; 　} 　if( this.cnt ) { 　　this.sx += this.vx; 　　this.sy += this.vy; 　　this.op += this.o; 　} else { 　　this.op = 100; 　　this.sx = 0; 　　this.sy = 0; 　} }; new AutoChanger( 'menu' ); </script> </body> </html>

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

「Javascriptについて詳しくはないので導入や設定の方法が見出せず困っております。」 とありますが、まずJavascriptとCSSについて基本的なところを理解してください。 そうしないと、出来合いのをつかうにしろ、オリジナルのなのを作るにしろ、困難かと 思います。 スライドショー機能は、javascriptのライブラリーとして様々な物が公開されており、 ライブラリー使うとプログラム作成が楽になります。 無難で、ベースにしやすい物として「jQuery」なんてどうでしょう。（宣伝する訳じゃないですが） http://docs.jquery.com/Main_Page スライドショー機能については、「jQuery」をベースにした 「jCarousel」とか「jCarousel Lite」なんてどうでしょう（他のでもいいですが） http://sorgalla.com/jcarousel/ http://gmarwaha.com/jquery/jcarousellite 「jCarousel」だと任意の<ul></ul>の中にある<li>要素をスライド表示します。 スライドのさせ方もいろいろオプションで調整できます。AJAXした内容をスライド させることも出来ます。使い方はこのサイトのドキュメントとかサンプルをよくみて 簡単な物を練習してみればすぐに使いこなせるようになります。 「リンクの設定などに触れているものが見つからない」とありますが、上記「jCarousel」だと <li><a href="xxxxxx"><img src="yyyyyy">XXXXXXX</a></li>で、確か<li>要素の中身がスライ ド表示されるので、そのまま画像クリックでリンク先に飛べたはずです。

回答No.2

おそらくたいていのサンプルで、画像（バナー）を表示するからには <IMG>タグが使用されていると思われます。 その<IMG>タグにonClickイベントを追加して、 表示されている画像ファイル名にてURLを場合分けしてやれば 可能じゃないでしょうか？

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

スライドショー的なライブラリはたくさんありますが、ほとんどのものでご質問の内容は可能と思われます。 あまり使ったことが無いので、特に設定が簡単なと言ってもわかりませんが… たまたま見つけたこんなのはただ列挙すればいいみたい。 http://miracle-ysdesign.com/blog/javascript/409.html http://www.keynavi.net/ja/iphoto.html http://hyper-text.org/archives/2007/02/javascript_css_crossfader.shtml ほかにも沢山あるはずだし、↑がすぐれものというつもりもありません。（あくまでも一例です） 仕組み自体はたいして難しくはないので、自分で使いやすいものをつくるのなら、この辺が参考になるかと。 http://javascript.eweb-design.com/0814_fio.html ただし、↑はＩＥでしか動かないので、クロスブラウザにするには透明度の制御部分を修正してあげれば可能。 その参考となりそうなのは http://www.game.gr.jp/mycom/15/index.htm http://memolog.org/2007/09/post-149.php （←これはCSSの例）

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

関連するQ&A

  • CSSのみでスライドショーを作りたい

    CSSのみで自動で横にスライドするスライドショーを作りたいのですが、 参考になるサイトはありますでしょうか？ フェードイン、フェードアウトさせるスライドショーの作り方は沢山でるのですが、 自動で横にスライドするスライドショーの作り方が載っているサイトが見当たりません。

    • ベストアンサー
    • CSS
  • ページを開くと自動でスライドが始まる設定

    古いですが、GoLive CSを使ってホームページを制作しています。 ページが開くとクリックなどの操作無しに、 自動でスライドショーが始まる設定を教えて下さい。 スライドの画像（JPEGファイル）は一つのフォルダにまとめ、 通し番号を付けています。 クリックすればスライドショーが始まる設定までは分かるのですが、 ページを読み込むと自動でスライドが始まる方法が分かりません。 後、スライドがフェードイン、フェードアウトしながら次の画像に移る方法も 併せて教えて頂ければ幸いです。 いろいろと質問が多いですが、何卒宜しくお願い致します。

    • ベストアンサー
    • CSS
  • JavaScriptでシンプルなスライドショー

    よろしくお願いいします！ JavaScriptを使って、とてもとてもシンプルなスライドショー（フォトアルバム）を作りたいのですが、 見つかるのはフェードインだったりアニメーションのようにズレたりと、希望のサンプルが見つけられませんでした。。。 下記のリンク先ようなボタンクリックで単純に写真が変わる、フォトアルバムを作りたいです。 http://www.mina-perhonen.jp/show/0809aw/index.html 流したい画像をフォルダにまとめておいて、 ボタンクリックでそれらを呼び出す。 最後の写真までいったら、ストップで、NEXTボタンガ消える。 写真の基準点はリンク先の用に右上になれば、よりうれしいです。 どなたか作り方や、似たようなサンプルを配布してくださっている方をご存じなら教えてください！！ 何卒よろしくお願いいたします！

  • スライドショーを自作したい

    複数の画像がフェードインして切り替わるスライドショーを作成したいです。 色々なライブラリを拝見したのですが、”再生ボタン”が設置されているものがなく、どれも自動再生のものばかりでした。 CS5を持っているので、そのようなフラッシュを自作したいのですが、flaファイルや作り方が載っているサイトはありませんでしょうか？ そのほかJAVAスクリプトでの作成も考えています。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • Flash
  • スライドショーにフェードイン・アウト効果

    javascriptのスライドショーにフェードイン・アウト効果をつける方法をご教授いただきたいのですが、どなたかよろしくお願いいたします。

  • クリックでスライドショー

    http://lab.komadoya.com/javascript/crossFader/#cf2 上記サイトのようなフェードイン・フェードアウトのスライドショーに 以下のような動作を追加したいと思っています。 画像をクリックしたら再生し、最後の画像でストップ。 もう一度クリックで１枚目の画像に戻る。 色々調べたのですが、マウスオーバーや自動再生のものが多く 思ったものが見つかりませんでした。 画像(1)、画像(2)、画像(3)とあり、 画像(1)クリックで、(1)→　(2)→　(3)でストップ。 もう一度クリックで(1)に戻る。 といったイメージです。 お分かりの方がおられましたらご教授頂けたら幸いです。 どうぞ宜しくお願いします。

  • Javascript使用のスライドショーのリンク

    Javascriptを使用したスライドショー（http://myisland.jp/template/gallery/gallery04.html ）の画像にリンクを付けることはこちら→（http://okwave.jp/qa/q6066267.html）の質問を元にできましたが、別ウィンドウで表示する方法が分かりません。どなたかお分かりでしょうか？Dreamweaver8で製作しております。

  • flash　jpgを読み込んでスライドショーを実行したい

    フラッシュで制作したアニメーションの一部にスライドショーを埋め込みたいと思っています。直接フラッシュでスライドショーのアニメーションを作るのではなく、別フォルダに格納されたjpgなどの画像を読み込んで、フェードイン、フェードアウトを繰り返しながら画像が切り替わっていくようにしたいのですが、どなたか方法が分かるようでしたら教えて下さい。よろしくお願いします。

  • Javascriptを使用したサムネイルスライドショーの画像リンク

    Javascriptを使用したサムネイルスライドショーの画像リンク 上記の件ですが、http://myisland.jp/template/gallery/gallery04.html こちらで配布されているJavascriptを使用した際に、表示される画像にそれぞれリンクを付けることは可能なのでしょうか？ どこを調整したらいいのか検討がつかず困っております。どなたか分かる方がいらっしゃれば教えて頂けませんでしょうか？

  • JavaScriptでスライドショー

    Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示するコンテンツを盛り込みたいと思っております。 現在サンプルを探しているのですが、数はあれどもなかなかこれといったものが見つけられません。 そこで下記の要望に適したサンプルがあれば教えて頂きたいです。 ・画像のスライドショー機能（自動開始が望ましいです） ・指定フォルダ内の不特定多数の画像を読み込める（そこに画像を追加したら自動で反映される） ・画像のミニビュー？が横に表示される 以上です。重要なのは1個目と2個目です。 エフェクトなどはまったくこだわるつもりが無いので、シンプルなものでも大丈夫です。 近いものでもかまいませんので教えて頂きたく。 宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する