①滑らかな動きのスライドショー

$(function () {
　 $('.slideshow').each(function () {
　　let $slides = $(this).find('img'),
　　slideCount = $slides.length,
　　currentIndex = 0;
　$slides.eq(currentIndex).fadeIn();
　setInterval(showNextSlide, 7500);
　function showNextSlide () {
　let nextIndex = (currentIndex + 1) % slideCount;
　$slides.eq(currentIndex).fadeOut();
　$slides.eq(nextIndex).fadeIn();
　　currentIndex = nextIndex;
　　}
　});
});

※.lengthプロパティを指定してjQueryオブジェクトに含まれる要素数を取得
※eq()メソッドで該当を選択する

eq()メソッドとは
複数あるjQueryオブジェクトのうち、引数に渡したインデックスに該当するものを選択するメソッド

※fadeIn()メソッドでフェードインアニメーションさせる

fadeIn()メソッドとは
徐々に不透明度を変化させながら表示させるメソッド

※setInterval()関数で時間経過でスライドショーさせる

setInterval()関数とは
指定した時間ごとに指定した処理を実行する関数
※Javascriptのネイティブ関数
※第1引数は実行する関数、第2引数は実行間隔

※fadeOut()メソッドでフェードアウトさせる

fadeOut()メソッドとは
徐々に不透明度を変化させながら非表示にするメソッド

Javascriptが無効になっている場合を考慮する
・Javascriptのライブラリ、Modernizrで判定する

②多機能なスライドショー

※html()メソッドでHTMLを挿入する

※html()メソッドとは
引数に渡した文字列をHTMLに挿入するメソッド

※preventDefault()メソッドで通常のクリック動作をキャンセルする

preventDefault()メソッドとは
イベントのデフォルト動作をキャンセルするメソッド

index()メソッドで兄弟要素のインデックスを取得する

index()メソッドとは
対象のjQueryオブジェクトについて、
その兄弟要素内でのインデックスを返すメソッド

③スティッキーヘッダー

※offset()メソッドで位置を取得する

offset()メソッドとは
jQuery要素のドキュメント上の位置を取得するメソッド

※scrollTop()メソッドでスクロール量を取得する

scrollTop()メソッドとは
要素がスクロール可能な場合に、
その要素が縦方向にどれだけスクロールされたのかを調べるメソッド

※trigger()メソッドでイベントを発火させる

trigger()メソッドとは
任意のイベントを発生させるメソッド

④デザインが変化するスティッキーヘッダー

※contents()メソッドで子要素すべてを選択する

contents()メソッドとは
対象要素の子要素すべてを選択するメソッド

※clone()メソッドでクローンを呼び出す

clone()メソッドとは
選択している要素の複製（クローン）を生成するメソッド

※outerHeight()メソッドで要素の高さを取得する

outerHeight()メソッドとは
要素の高さを求めるメソッド

※append()メソッドでヘッダーのクローンを挿入する

append()メソッドとは
引数に指定された要素をjQueryオブジェクトに挿入するメソッド

⑤画面領域を有効活用できるタブ

※hide()メソッドで要素を非表示にする

hide()メソッドとは
要素を非表示にするメソッド

※attr()メソッドで要素の属性を取得する

attr()メソッドとは
要素の属性値を取得するメソッド

⑥高機能で拡張しやすいタブ

jQuery UIを利用して実装する

jQuery UIとは
ユーザーインターフェース系のプラグインの集まり

※position()メソッドで要素の位置を取得する

position()メソッドとは
要素の位置を取得するメソッド

offset()とposition()メソッドの違い
・offset()はドキュメントを基準にした位置を返す
・position()はpositionプロパティの値がstatic以外である
直近の祖先要素を基準にした位置を返す

⑦スムーズスクロール

scrollTop()はスクロールバーの上下の位置
scrollLeftはスクロールバーの左右の位置

⑧拡張性のあるスムーズスクロール

SmoothScrollプラグインで実装

⇒サンプル・デモサイトはこちら

⇒【公式】jQuery 最高の教科書の購入はこちら