• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：Javascriptを使用したスライドバナーについて教えてください）

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

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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する