本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。
この記事は最終更新から3年以上経過しています。
ページを開いたときにフェードインするスライドショー（全画面）を実行し、スライドが終わったらトップページに遷移させるようにしてほしいといわれて対応したときのメモ。ようはオープニング画面を表示させた後にトップ画面を表示させたいということですね。
全画面スライドが可能なjQueryプラグインを探し、高機能でIEでも動くsupersizedでスライドショーを実装。「skip」ボタンを押したらトップ画面に遷移するようにしました。
この仕様だと「skip」ボタンを押さない限りループし続けるので、当然といえば当然ですが、全ての画像をスライド表示したらループさせずにトップページに遷移させてほしいという要望が出てきました。で、その機能を実装しようとしたのですが日本語の文献が見つからず、最後は英語サイトを転々としてなんとか下記のエントリーを見つけて解決することができました。
jquery supersized stop_loop redirect?
$(function(){
var interval = 5000,
speed = 1000,
slideArray = [
{image : '/img/slideshow/photo_01.jpg'},
{image : '/img/slideshow/photo_02.jpg'},
{image : '/img/slideshow/photo_03.jpg'},
{image : '/img/slideshow/photo_04.jpg'},
{image : '/img/slideshow/photo_05.jpg'}
]; // add your slides to this array
$.supersized({
slideshow : 1,
autoplay : 1,
start_slide : 1,
stop_loop : true, // Pauses slideshow on last slide
random: 0,
slides : slideArray,
slide_interval : interval,
transition : 1,
transition_speed : speed
});
setTimeout(function() {
window.location = "/index.html";
}, (interval + speed) * slideArray.length);
});
ブランドショップ等のサイトではこういった機能を実装してほしいという要望がそれなりにありそうな気がします。
サンプルはこちら