同様の形でクロスフェードではなくフルスクリーンの状態で画像全体が横スライドして見せるスクリプトサンプルを作ってみたので紹介してみます。言葉では少々説明しずらいのでまず動作サンプルから。「jQueryでページの最上部に位置固定したフルスクリーンスライダーを設置する方法」サンプルを別枠で表示ページ最上部に位置固定したフルスクリーンサイズでのスライドショーを設置します。※画像全体は横スライドして切り替えページをスクロールさせるとフルスクリーンスライドショーはページ上部に固定されたままになり下からコンテンツ要素が出現してきます。スライドショー全体はブラウザサイズを変化させてもウィンドウの幅と高さに合わせて伸縮する構成になっておりスクロール位置がページ最上部にある場合に画面めいっぱいで収まる形になっています。このフルスクリーンスライドショーの全体構成についてまずはHTMLから。class="contents"><p>ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。class=”fullSlider”>で囲われた部分のみとなりその他の部分はサンプル画面を生成するサンプル要素になります。サンプルでは5枚の画像を<li>を5つ並べて切り替えています。表示個数を増減するには<li>を増やしたり減らしたりするだけになっています。※<li>が一つだけの場合はスライド機能は動作せず静止画像一枚がフルスクリーン表示します。これに対してCSSは以下の様になっています。hidden;}スライドショー内の左右のNEXT/BACKボタン部分の見た目やページネーションの形状などはCSSで指定します。スライド要素の幅や高さについてはスクリプト側で制御するので、ここでは記述していません。120;」は必須となっております。(背景色に関しては任意の色や画像で可)そして実際の動作スクリプトは以下の様になります。'1'){slideTimer();}}).resize();findWrap.css({left:-(baseWrapWidth)});}$('body').css({opacity:'0',visibility:'visible'}).stop().animate({opacity:'1'},1000);});});});</script>スクリプト開始部分にある各種設定値の内容については以下の様になっています。0.5;ページネーションボタンの透過度これらの設定値を変更することで微調整が可能になっています。スクリプト全体はあまりシンプルと言える構成ではありませんが少しの設定値を調整するだけで簡単に設置することが可能になっているかと思います。スライドショーの左右にあるNEXT/BACKボタンは「sideNavi」の値を「’on’」や「’off’」とすることで表示/非表示を切り替えることができます。(記述は「off」でなくても「on」じゃなければ何でもいいです・・・)表示したNEXT/BACKボタンをスライドショーエリアにカーソルが乗った時(ロールオーバー)のみ表示させるようにするには「sideHide」を「’hide’」とします。常にボタンを表示させるにはここの値は「’show’」とします。findWrap.find(‘.fullImg’)」といったように「img」タグから任意のクラス名に変更させることで可能になるかと思います。(CSS側のimg対象も要調整)「jquery.easing.js」プラグインを併用することでスライドする際のアニメーションにさまざまなイージングを設定することも可能です。上記で紹介したサンプルではスライドショー内に左右のボタンやページネーションをつけてありますがそれらを省いて画像がスライドするだけのシンプルな形でのスライドショーを実装する場合は次の様な形になります。画像がスライドするだけのシンプルなスライドショーで実装する「画像がスライドするだけのシンプルなスライドショーで実装する」サンプルを別枠で表示こちらのパターンではページ最上部のフルスクリーンスライドショーには左右のボタンやページネーションは実装しない構成で画像がスライドするだけのシンプルなスライドショーになっています。全体構成については、HTMLはそのまま、CSS側では「.pagiNation」の「z-index」と「visibility」の値を非表示にする設定に変更します。*/}スクリプト側では開始部分の設定値にて「sideNavi」を「’off’」にしておきます。以上の変更で左右のボタンやページネーションをつけない形でのフルスクリーンスライドショーが実装可能になります。最後に、ページ上部に配置するフルスクリーンスライドショーを位置固定せずにユーザーのスクロール動作に合わせて上にスクロール移動していくパターンのサンプルについて。スライドショーをページ上部に固定させずに実装する「スライドショーをページ上部に固定させずに実装する」サンプルを別枠で表示このパターンではページ最上部に設置してあるフルスクリーンスライドショーはページをスクロールすることによって位置が固定されることなくコンテンツ要素と一緒に上へスクロールされるようになっています。上記の「position」の値を「absolute」に変更します。*/}以上の3パターンにてページ最上部にフルスクリーンスライダーを実装する方法の紹介でした。各サンプルでは画像だけをスライドさせるスライダーになっていますがその上(前面)にロゴ画像やメニューボタンやテキストなどのパーツ類を重ねて配置させることも可能かと思います。ページ最上部に位置固定したフルスクリーンスライダーを実装する際にぜひ。17:05はじめまして。通常の画像で、ページ最上部に表示させるフルスクリーンスライダーを探していてまさにやりたかった事ドンピシャりで、とても助かりました。ありがとうございます。ひとつ質問があるのですが、スライド画像をランダムに表示にする事は可能でしょうか?もし可能でしたら、方法をご教授いただけませんでしょうか。なにぶんjqueryに疎いもので・・・.お手数をおかけして申し訳ありません。11:12>サカモトさんコメントありがとうございます。当記事のフルスクリーンスライダーをご活用いただいているようで嬉しく思っております。こちらの2つめのサンプルスクリプト内で「リストのランダム並べ替え」という部分に処理を入れ込んでありますので参考にしてみていただければと思っております。13:15いつも参考にさせてもらっています、ありがとうございます。上記のスクリプトは全面表示ですが、widthはそのままで高さの調整はできますでしょうか?フルスクリーンでなくワイドはフル、高さはいろいろ調整したいです。いうことは、このスクリプトで可能でしょうか?よろしくお願いします。0:53>ゆーろさげさんコメントありがとうございます。当記事のフルスクリーンスライダーをご活用いただいているようで嬉しく思っております。高さ固定についてはそのような仕様で構成することも可能だと思いますがちょっとしばらくはサンプル等を作成する時間がとれずにおりますのでいつかオプション設定などで用意できましたらここで紹介させていただきたいと思っております。13:10ありがとうございます。それでは、サンプルができるのを待っておきます。私が参考にしているサイトアドレスも明記しておきます。11:44やっと探してたどり着いてすごく助かります。0:26>通りすがりの名無しさんフェード切り替えの場合は当ブログ別記事の・jQueryでページの最上部に位置固定したフルスクリーンスライドショー(クロスフェード)を設置する方法http://black-flag.net/jquery/20141028-5428.htmlこちらをお試しください。15:36ありがとうございます。おかげさまで助かりました。13:14初めまして。素敵なスライドショーに出会えてとても嬉しいです。完結に作られたものがなく初心者には難しいのですが、こちらのサイトはとても分かりやすく掲載されているので、他のページも拝見させて試させて頂いています。このスライドショーの画像上の上部に透過させたメニューを表示させたいのですが、どうしても画像に重なってくれません。メニュー自体も画像から分離してしまったりして纏めることができません。方法がお分かりでしたら是非教えて頂きたいのですが・・・htmlにはheaderを書いてで項目を表示させ、一番右側にはトグルボタンを設置しようと考えています。トグルを設定するとメニューが縦並びになってしまったり、やはり分離したり・・・すみません、宜しければご教示頂けますと幸いです。10:30>ご飯のおともさんコメントありがとうございます。当記事のフルスクリーンスライダー他もろもろご活用いただいているようで嬉しく思っております。ご質問いただきました件については実際に実装されているテストページ等を見せていただけない限りは見当もつきませんがスライドエリア前面にメニューを重ねる際には、ページネーションなどのパーツの「z-index」を「110」で設定しているところがありますので重ねるメニューの「z-index」の値をそれ以上の値にして「position:absolute;」で重ねることで可能になるかと思います。