重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

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

解決済

  • 質問者：kazuhiy
  • 質問日時：
  • 回答数：6件

現在ECサイトを構築しておりまして、TOPページの一定の場所の中で画像が自動でスライド、もしくはフェードイン・アウトで切り替わるバナーを設置したいと思っています。
似たようなイメージのものを設置しているサイトさんのソースを覗いたりしているのですがJavascriptについて詳しくはないので導入や設定の方法が見出せず困っております。


各画像にはそれぞれ別のリンク先を設定したいのですが何か参考になるサイトや方法などございませんでしょうか？

自動や手動で画像が切り替わるスライドショーなどは多数見つけたのですが、リンクの設定などに触れているものが見つからなかったのでこちらに投稿させていただきました。


あくまでもFLASHではなくJavascriptで行いたいので宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

＃４～５です。

ねぼけてまちがえてました
ただしくは、
　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>
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： babu_baboo
  • 回答日時：

ていせい。

このへんを、それに。

s./*@if(1) filter = 'alpha(opacity='+ this.op +')' @else@*/
sopacity = (this.op / 100) /*@end@*/;
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： babu_baboo
  • 回答日時：

っふぅ～　ちかれたあ～。


<!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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

「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>要素の中身がスライ
ド表示されるので、そのまま画像クリックでリンク先に飛べたはずです。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： chochobizo
  • 回答日時：

おそらくたいていのサンプルで、画像（バナー）を表示するからには


<IMG>タグが使用されていると思われます。

その<IMG>タグにonClickイベントを追加して、
表示されている画像ファイル名にてURLを場合分けしてやれば
可能じゃないでしょうか？
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

スライドショー的なライブラリはたくさんありますが、ほとんどのものでご質問の内容は可能と思われます。


あまり使ったことが無いので、特に設定が簡単なと言ってもわかりませんが…

たまたま見つけたこんなのはただ列挙すればいいみたい。
http://miracle-ysdesign.com/blog/javascript/409. …
http://www.keynavi.net/ja/iphoto.html
http://hyper-text.org/archives/2007/02/javascrip …
ほかにも沢山あるはずだし、↑がすぐれものというつもりもありません。（あくまでも一例です）

仕組み自体はたいして難しくはないので、自分で使いやすいものをつくるのなら、この辺が参考になるかと。
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の例）
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報