VOGUE.COMのトップページのようなjavascriptによるスラ

質問

VOGUE.COMのトップページのようなjavascriptによるスライショーを作りたいのですが、
javascriptがあまり詳しくないのでどう作ったらよいか分かりません。

目的は
5枚のバナー（740×300）をオート再生でスライドショーにしたいのですが、
VOGUE.COMのように、下のバーのボタンを押すとふわっと消え他のバナーに飛んだり、一時停止のようにしたいです。

もちろんバナーを押すとリンク先に移動（これは普通にリンクを入れるだけだと思うので大丈夫です）

さらに言うと、順番はページにアクセスする度にランダムにしたいです。

また、この画像は比較的最初の方へ、この画像は比較的後ろの方へ、と確率調整もできるのであれば尚良いです（これはできればで良いです）

デザインは、VOGUEのようにしたいと思ってます。下は赤ではなく黒系のバーですが。
このバーは画像の上に載ってますよね？同じにように透けたバーを載せたにしたいです。

このように作るにはどうしたら良いでしょうか？

宜しくお願い致します。

回答No.2

yyr446 · ベストアンサー

「確率調整」のアイデア
5個だとあまり利用価値ないですが、

・最初に画像配列を定義する時、前の方に出したいものは前の方、
後ろの方に出したいものは後ろの方に定義しておく。

・画像配列を、前半部配列、中部配列、後半部配列に分割して、
それぞれをシャッフル

・画像配列を前半部配列、中部配列、後半部配列をコンカチした配列に置き換える

でOKだ。

配列の分割：array..splice(index, howMany, [element1][, ..., elementN]);

https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array/splice

配列の結合：array.concat(value1, value2, ..., valueN);

https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array/concat

配列のシャッフルは↓でよかろう（Fisher-Yates方）

Array.prototype.shuffle = function() {
var i = this.length;
while(i){
var j = Math.floor(Math.random()*i);
var t = this[--i];
this[i] = this[j];
this[j] = t;
}
return this;
}

お礼

ありがとうございます。
ランダム再生以外はjqueryを使ってできました。

ランダム再生はもう少しプログラムを自分でかまえるように勉強してみたいと思います。

回答No.1

yyr446

この質問の肝は、
「この画像は比較的最初の方へ、この画像は比較的後ろの方へ、と確率調整もできる」
ですね！

他の事は、いっぱいサンプルとか、スライドショーのライブラリーありますから、
なんとでもなるでしょう。

http://gmarwaha.com/jquery/jcarousellite/index.php#demo
http://spaceforaname.com/galleryview#demos
http://nivo.dev7studios.com/

http://www.geocities.jp/miyake_kobo/dl/koukai.html

お礼

ありがとうございます。
確率調整はあくまで、完成後の余裕みたいなとこです。

主目的はやはりスライドを作り上げる事です。

参考サイトを拝見しましたが、
VOUGEのとは違う感じですね。

あとはCSS等でデザインを変えていく感じなんでしょうか？