JSコードは、バニラとjQueryの2つの形式で表示されます。 これは特に強調するために行われます。最近のブラウザーでは、特にアニメーションやCSSトランジションと組み合わせる場合、単純なJSでも非常にうまく使用できます。 jQueryは、ブラウザの非互換性を心配したり、よりシンプルなAPIを使用したくない場合に適しています。 提供されるコードは、デモンストレーションのみを目的としています。
バニラJSの例では、最も単純なオブジェクト初期化メソッドinit（）を使用しています。 このメソッドでは、適切なコードを呼び出して、newを介してオブジェクトをインスタンス化します。 このStack Overflowスレッドは、すべてを詳細に説明しています。 なぜ関数ではなくオブジェクトなのですか？ この質問に答えるには別の記事が必要になりますが、一般的には、コードを整理して再利用しやすくするためだけです。
HTML構造
HTMLマークアップは、CSSとJSを使用せずにページを読みやすくする必要があります。 したがって、構造を構成するコンポーネントを把握する必要があります。 これは通常次のとおりです。
1）最も外部のコンテナ
2）インナーラッパー
3）複数のスライド要素
4）ページへのリンクのラッパー
5）「前」と「次」の2つのボタン
コンポーネント2、4、および5はオプションです。
-スライドは1つの要素にまとめることができます。 これは、スライド間の移行がフェードイン/フェードアウトを介して行われるときに行われます
-スライドショーが自動で、ユーザーの介入なしに発生する場合、ページおよびボタンへのリンクを省略できます
可能なHTML構造の例：
<div class="slider" id="main-slider"><!-- --> <div class="slider-wrapper"><!-- --> <div class="slide">...</div><!-- slides --> <div class="slide">...</div> <div class="slide">...</div> </div> <div class="slider-nav"><!-- "" "" --> <button type="button" class="slider-previous"></button> <button type="button" class="slider-next"></button> </div> </div>
同じページに複数のスライドショーがある場合があるため、スライドにはクラスを使用することをお勧めします。 外部コンテナのIDを使用して、さまざまなスライドショーを識別できます。
ここではリンクが適切ではないため、リンクの代わりにボタンを持つ要素が使用されます。スクリプトのボタンを使用します（詳細については、ボタンを作成できない記事を参照してください）。
スライドに画像のみが含まれる場合、構造をわずかに変更できます。
<div class="slider" id="main-slider"><!-- --> <div class="slider-wrapper"><!-- --> <img src="image1.jpg" alt="First" class="slide" /><!-- slides --> <img src="image2.jpg" alt="Second" class="slide" /> <img src="image3.jpg" alt="Third" class="slide" /> </div> <div class="slider-nav"><!-- "" "" --> <button type="button" class="slider-previous"></button> <button type="button" class="slider-next"></button> </div> </div>
alt属性に意味のある値を忘れずに追加してください。
ページリンクを使用するには、次の操作を実行できます。
<div class="slider" id="main-slider"><!-- --> <div class="slider-wrapper"><!-- --> <div class="slide" id="slide-1">...</div><!-- slides --> <div class="slide" id="slide-2">...</div> <div class="slide" id="slide-3">...</div> </div> <div class="slider-nav"><!— --> <a href="#slide-1">1</a> <a href="#slide-2">2</a> <a href="#slide-3">3</a> </div> </div>
アンカーのおかげで、各リンクは独自のスライドにつながります。 これは、JSなしでページが機能するように特別に設計されています。
リンクとコントロールを組み合わせたスライドショーがあります。
<div class="slider" id="main-slider"><!-- --> <div class="slider-wrapper"><!-- --> <!-- slides --> <div class="slide" id="slide-1" data-image="image1.jpg"></div> <div class="slide" id="slide-2" data-image="image2.jpg"></div> <div class="slide" id="slide-3" data-image="image3.jpg"></div> </div> <!-- "" "" --> <div class="slider-nav"> <button type="button" class="slider-previous"></button> <button type="button" class="slider-next"></button> </div> <!-- --> <div class="slider-pagination"> <a href="#slide-1">1</a> <a href="#slide-2">2</a> <a href="#slide-3">3</a> </div> </div>
「データ」属性の使用に注意してください。一部のスライドショーでは、背景として画像を挿入できます。これらの属性は、背景とスライドを接続する場所としてスクリプトで使用されます。
リストを使用する
意味的に正しいアプローチは、リストアイテムをスライドとして使用することです。 この場合、構造は次のようになります。
<ul class="slider-wrapper"><!-- --> <li class="slide" id="slide-1">...</li><!-- --> <li class="slide" id="slide-2">...</li> <li class="slide" id="slide-3">...</li> </ul>
スライドの順序が明確に定義されている場合（プレゼンテーションなど）、番号付きリストを使用できます
CSS
:
<div class="slider" id="main-slider"><!-- --> <div class="slider-wrapper"><!-- --> <img src="image1.jpg" alt="First" class="slide" /><!-- slides --> <img src="image2.jpg" alt="Second" class="slide" /> <img src="image3.jpg" alt="Third" class="slide" /> </div> <div class="slider-nav"><!-- "" "" --> <button type="button" class="slider-previous"></button> <button type="button" class="slider-next"></button> </div> </div>
CSS
:
<div class="slider" id="main-slider"><!-- --> <div class="slider-wrapper"><!-- --> <img src="image1.jpg" alt="First" class="slide" /><!-- slides --> <img src="image2.jpg" alt="Second" class="slide" /> <img src="image3.jpg" alt="Third" class="slide" /> </div> <div class="slider-nav"><!-- "" "" --> <button type="button" class="slider-previous"></button> <button type="button" class="slider-next"></button> </div> </div>
CSS
:
<div class="slider" id="main-slider"><!-- --> <div class="slider-wrapper"><!-- --> <img src="image1.jpg" alt="First" class="slide" /><!-- slides --> <img src="image2.jpg" alt="Second" class="slide" /> <img src="image3.jpg" alt="Third" class="slide" /> </div> <div class="slider-nav"><!-- "" "" --> <button type="button" class="slider-previous"></button> <button type="button" class="slider-next"></button> </div> </div>
なぜなら スライドショーは右から左に移動するため、外側のコンテナにはすべてのスライドが含まれるため、外側のコンテナのサイズは固定され、内側のコンテナの幅は広くなります。 最初のスライドが表示されます。 これはオーバーフローによって設定されます：
.slider { width: 1024px; overflow: hidden; } .slider-wrapper { width: 9999px; height: 683px; position: relative; transition: left 500ms linear; }
内側のラッパースタイルには次のものがあります。
-広い幅
-固定高さ、最大スライド高さ
-位置：相対、スライド移動を作成できます
-CSSトランジションが左に移動し、動きがスムーズになります。 簡単にするために、すべてのプレフィックスを指定しませんでした。 このために、CSS変換を（翻訳とともに）使用することもできます。
スライドにはfloat属性があり、1行に並んでいます。 JSで左オフセットを取得できるように、それらは相対的に配置されます。 スライド効果を作成するために使用します。
.slide { float: left; position: relative; width: 1024px; height: 683px; }
特定の幅を設定しますが、スクリプトでは、スライドの数にスライドの幅を掛けることで、幅を変更できます。 必要な幅がわからない。
ナビゲーションは、「前へ」および「次へ」ボタンを介して実行されます。 デフォルトのスタイルをゼロにして、独自のスタイルを割り当てます。
.slider-nav { height: 40px; width: 100%; margin-top: 1.5em; } .slider-nav button { border: none; display: block; width: 40px; height: 40px; cursor: pointer; text-indent: -9999em; background-color: transparent; background-repeat: no-repeat; } .slider-nav button.slider-previous { float: left; background-image: url(previous.png); } .slider-nav button.slider-next { float: right; background-image: url(next.png); }
ボタンの代わりにページリンクを使用する場合、次のスタイルを作成できます。
.slider-nav { text-align: center; margin-top: 1.5em; } .slider-nav a { display: inline-block; text-decoration: none; border: 1px solid #ddd; color: #444; width: 2em; height: 2em; line-height: 2; text-align: center; } .slider-nav a.current { border-color: #000; color: #000; font-weight: bold; }
これらのクラスは、スクリプトから動的に割り当てられます。
このアプローチは、スライド効果に適しています。 フェードと表示の効果を達成したい場合は、フロートがスライド間に水平インデントを追加するため、スタイルを変更する必要があります。 つまり、1行のスライドは必要ありません-スライドの「パック」が必要です。
.slider { width: 1024px; margin: 2em auto; } .slider-wrapper { width: 100%; height: 683px; position: relative; /* */ } .slide { position: absolute; /* */ width: 100%; height: 100%; opacity: 0; /* */ transition: opacity 500ms linear; } /* */ .slider-wrapper > .slide:first-child { opacity: 1; }
スライドを非表示にするには、opacityプロパティを使用します。これは、画面からデータを読み取るためのプログラムが、display：noneがインストールされている要素のコンテンツをスキップするためです。
CSSのコンテキスト上の配置により、ソースの最後のスライドが他のスライドよりも先になるスライドの「パック」を作成しました。 しかし、これは必要ありません。 スライドの順序を維持するには、最初のスライドを除くすべてのスライドを非表示にする必要があります。
JSはCSSトランジションを使用して、現在のスライドの不透明度プロパティの値を変更し、他のすべてのユーザーに対してこの値を無効にします。
IE9の問題
IE9はCSS遷移をサポートしていません。 プロパティの値を変更すると、その外観が即座に変更されます。 スムーズにするために、jQueryを使用する必要があります。 Stack Overflowのこのスレッドで可能なソリューションの詳細をお読みください。
JavaScriptコード
ページネーションスライドショー
「次へ」ボタンと「前へ」ボタンをクリックして、ページネーションを行わないスライドショー。 これらは、増分演算子および減分演算子と見なすことができます。 ボタンをクリックするたびに増減するポインター（またはカーソル）が常にあります。 その初期値は0であり、目標は、配列の要素が選択されるのと同じ方法で現在のスライドを選択することです。
そのため、最初に[次へ]をクリックすると、ポインターが1つ増え、2番目のスライドが表示されます。 [前へ]をクリックして、ポインターを減らして最初のスライドを取得します。 等
ポインターと共に、jQuery .eq（）メソッドを使用して現在のスライドを取得します。 純粋なJSでは、次のようになります。
function Slideshow( element ) { this.el = document.querySelector( element ); this.init(); } Slideshow.prototype = { init: function() { this.slides = this.el.querySelectorAll( ".slide" ); //... }, _slideTo: function( pointer ) { var currentSlide = this.slides[pointer]; //... } };
要確認-NodeListは配列と同じようにインデックスを使用します。 現在のスライドを選択する別の方法は、CSS3セレクターを使用することです。
Slideshow.prototype = { init: function() { //... }, _slideTo: function( pointer ) { var n = pointer + 1; var currentSlide = this.el.querySelector( ".slide:nth-child(" + n + ")" ); //... } };
CSS3セレクター：nth-child（）は1の要素をカウントするため、ポインターに1つ追加する必要があります。 スライドを選択したら、その親コンテナを右から左に移動する必要があります。 jQueryでは、.animate（）メソッドを使用できます。
(function( $ ) { $.fn.slideshow = function( options ) { options = $.extend({ wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing: "linear" }, options); var slideTo = function( slide, element ) { var $currentSlide = $( options.slides, element ).eq( slide ); $( options.wrapper, element ). animate({ left: - $currentSlide.position().left }, options.speed, options.easing ); }; //... }; })( jQuery );
通常のJSには.animate（）メソッドがないため、CSSトランジションを使用します。
.slider-wrapper { position: relative; // transition: left 500ms linear; }
これで、スタイルオブジェクトを介してleftプロパティを動的に変更できます。
function Slideshow( element ) { this.el = document.querySelector( element ); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); //... }, _slideTo: function( pointer ) { var currentSlide = this.slides[pointer]; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; } };
次に、各コントロールに対してクリックイベントを作成する必要があります。 jQueryでは.on（）メソッドを使用でき、純粋なJSではaddEventListener（）メソッドを使用できます。
また、ポインターがリストの境界に達するかどうかを確認する必要があります-「前」の場合は0、「次」の場合はスライドの総数。 いずれの場合も、対応するボタンを非表示にする必要があります。
(function( $ ) { $.fn.slideshow = function( options ) { options = $.extend({ wrapper: ".slider-wrapper", slides: ".slide", previous: ".slider-previous", next: ".slider-next", //... speed: 500, easing: "linear" }, options); var slideTo = function( slide, element ) { var $currentSlide = $( options.slides, element ).eq( slide ); $( options.wrapper, element ). animate({ left: - $currentSlide.position().left }, options.speed, options.easing ); }; return this.each(function() { var $element = $( this ), $previous = $( options.previous, $element ), $next = $( options.next, $element ), index = 0, total = $( options.slides ).length; $next.on( "click", function() { index++; $previous.show(); if( index == total - 1 ) { index = total - 1; $next.hide(); } slideTo( index, $element ); }); $previous.on( "click", function() { index--; $next.show(); if( index == 0 ) { index = 0; $previous.hide(); } slideTo( index, $element ); }); }); }; })( jQuery );
そして、純粋なJSでは、次のようになります。
function Slideshow( element ) { this.el = document.querySelector( element ); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); this.previous = this.el.querySelector( ".slider-previous" ); this.next = this.el.querySelector( ".slider-next" ); this.index = 0; this.total = this.slides.length; this.actions(); }, _slideTo: function( pointer ) { var currentSlide = this.slides[pointer]; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, actions: function() { var self = this; self.next.addEventListener( "click", function() { self.index++; self.previous.style.display = "block"; if( self.index == self.total - 1 ) { self.index = self.total - 1; self.next.style.display = "none"; } self._slideTo( self.index ); }, false); self.previous.addEventListener( "click", function() { self.index--; self.next.style.display = "block"; if( self.index == 0 ) { self.index = 0; self.previous.style.display = "none"; } self._slideTo( self.index ); }, false); } };
例
jQuery： スライドショー
純粋なJavaScriptスライドショー
ページングスライドショー
このようなスライドショーでは、各リンクが1つのスライドを担当するため、ポインターは不要です。 アニメーションは変わりません-ユーザーがスライドをナビゲートする方法は変わります。 jQueryの場合、次のコードがあります。
(function( $ ) { $.fn.slideshow = function( options ) { options = $.extend({ wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed: 500, easing: "linear" }, options); var slideTo = function( slide, element ) { var $currentSlide = $( options.slides, element ).eq( slide ); $( options.wrapper, element ). animate({ left: - $currentSlide.position().left }, options.speed, options.easing ); }; return this.each(function() { var $element = $( this ), $navigationLinks = $( "a", options.nav ); $navigationLinks.on( "click", function( e ) { e.preventDefault(); var $a = $( this ), $slide = $( $a.attr( "href" ) ); slideTo( $slide, $element ); $a.addClass( "current" ).siblings(). removeClass( "current" ); }); }); }; })( jQuery );
この場合、各アンカーは特定のスライドのIDに対応します。 純粋なJSでは、それとNodeList内のスライドの数値インデックスを格納するデータ属性の両方を使用できます。
function Slider( element ) { this.el = document.querySelector( element ); this.init(); } Slider.prototype = { init: function() { this.links = this.el.querySelectorAll( "#slider-nav a" ); this.wrapper = this.el.querySelector( "#slider-wrapper" ); this.navigate(); }, navigate: function() { for ( var i = 0; i < this.links.length; ++i ) { var link = this.links[i]; this.slide( link ); } }, slide: function( element ) { var self = this; element.addEventListener( "click", function( e ) { e.preventDefault(); var a = this; self.setCurrentLink( a ); var index = parseInt( a.getAttribute( "data-slide" ), 10 ) + 1; var currentSlide = self.el.querySelector( ".slide:nth-child(" + index + ")" ); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll( "a" ); link.className = "current"; for ( var j = 0; j < a.length; ++j ) { var cur = a[j]; if ( cur !== link ) { cur.className = ""; } } } };
IE10以降では、classListを使用してクラスを管理できます。
link.classList.add( "current" );
IE11では、データセットプロパティを介してデータ属性を取得できます。
var index = parseInt( a.dataset.slide, 10 ) + 1;
例
jQuery：ページネーションスライドショー
JavaScript：ページネーションスライドショー
ページネーションとコントロールのスライドショー
このようなスライドショーは、コードにとってはやや困難です。ポインターとページハッシュの使用を組み合わせる必要があります。 つまり、現在のスライドは、ポインターの位置とリンクを介して選択されたスライドの両方に基づいて選択する必要があります。
リンク番号3をクリックすると、ポインターを2に設定する必要があります。「前へ」をクリックして、2番目のスライドに移動します。 つまり、同期を行う必要があります。
これは、DOMの各リンクの番号インデックスを介して同期できます。 1つのリンク-1つのスライド。インデックスは0、1、2などになります。
jQueryでは、コードは次のようになります。
(function( $ ) { $.fn.slideshow = function( options ) { options = $.extend({ //... pagination: ".slider-pagination", //... }, options); $.fn.slideshow.index = 0; return this.each(function() { var $element = $( this ), //... $pagination = $( options.pagination, $element ), $paginationLinks = $( "a", $pagination ), //... $paginationLinks.on( "click", function( e ) { e.preventDefault(); var $a = $( this ), elemIndex = $a.index(); // DOM numerical index $.fn.slideshow.index = elemIndex; if( $.fn.slideshow.index > 0 ) { $previous.show(); } else { $previous.hide(); } if( $.fn.slideshow.index == total - 1 ) { $.fn.slideshow.index = total - 1; $next.hide(); } else { $next.show(); } slideTo( $.fn.slideshow.index, $element ); $a.addClass( "current" ). siblings().removeClass( "current" ); }); }); }; //... })( jQuery );
カーソルの可視性が変更されたことがすぐにわかります-インデックスがスライドショーオブジェクトのプロパティとして宣言されました。 このようにして、jQueryコールバックによって作成される可能性のあるスコープの問題を回避します。 これで、スライドショーオブジェクトのパブリックプロパティとして宣言されているため、カーソルはどこからでもアクセスでき、プラグインの名前空間の外でもアクセスできます。
.index（）メソッドは、各リンクの数値インデックスを提供します。
純粋なJSにはそのようなメソッドはないため、データ属性を使用する方が簡単です。
(function() { function Slideshow( element ) { this.el = document.querySelector( element ); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); this.previous = this.el.querySelector( ".slider-previous" ); this.next = this.el.querySelector( ".slider-next" ); this.navigationLinks = this.el.querySelectorAll( ".slider-pagination a" ); this.index = 0; this.total = this.slides.length; this.setup(); this.actions(); }, //... setup: function() { var self = this; //... for( var k = 0; k < self.navigationLinks.length; ++k ) { var pagLink = self.navigationLinks[k]; pagLink.setAttribute( "data-index", k ); // pagLink.dataset.index = k; } }, //... }; })();
これで、プロシージャをリンクに接続し、作成したデータ属性を使用できます。
actions: function() { var self = this; //... for( var i = 0; i < self.navigationLinks.length; ++i ) { var a = self.navigationLinks[i]; a.addEventListener( "click", function( e ) { e.preventDefault(); var n = parseInt( this.getAttribute( "data-index" ), 10 ); // var n = parseInt( this.dataset.index, 10 ); self.index = n; if( self.index == 0 ) { self.index = 0; self.previous.style.display = "none"; } if( self.index > 0 ) { self.previous.style.display = "block"; } if( self.index == self.total - 1 ) { self.index = self.total - 1; self.next.style.display = "none"; } else { self.next.style.display = "block"; } self._slideTo( self.index ); self._highlightCurrentLink( this ); }, false); } }
例
jQuery：コントロールを備えたページネーションスライドショー
JavaScript：コントロール付きのページネーションスライドショー
サイズを扱っています
次のCSSルールに戻りましょう。
.slider-wrapper { width: 9999px; height: 683px; position: relative; transition: left 500ms linear; }
スライドがたくさんある場合、9999では十分ではないかもしれません。 各スライドの幅と数に基づいて、スライドの寸法をオンザフライで調整する必要があります。
jQueryでは、これは簡単です。
// - return this.each(function() { var $element = $( this ), total = $( options.slides ).length; //... $( options.slides, $element ).width( $( window ).width() ); $( options.wrapper, $element ).width( $( window ).width() * total ); //... });
ウィンドウの幅を取得し、各スライドの幅を設定します。 内部ラッパーの合計幅は、ウィンドウの幅とスライドの数を掛けることで得られます。
// - return this.each(function() { var $element = $( this ), total = $( options.slides ).length; //... $( options.wrapper, $element ).width( $( options.slides ).eq( 0 ).width() * total ); //... });
ここで、初期の幅は各スライドの幅によって与えられます。 ラッパーの合計幅を設定するだけです。
内側のコンテナは十分な幅になりました。 純粋なJSでは、これはほぼ同じ方法で行われます。
// - Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; // Viewport's width var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for( var i = 0; i < self.total; ++i ) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // - Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides[0].offsetWidth; // Single slide's width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };
フェード効果
フェード効果は、スライドショーでよく使用されます。 現在のスライドが消え、次のスライドが表示されます。 JQueryには、opacityプロパティとdisplayプロパティの両方で機能するfadeIn（）およびfadeOut（）メソッドがあるため、アニメーションが終了すると要素がページから削除されます（表示：なし）。
純粋なJSでは、opacityプロパティを操作し、CSSポジショニングスタックを使用するのが最適です。 その後、最初にスライドが表示され（不透明度：1）、他のスライドは非表示になります（不透明度：0）。
次の一連のスタイルは、この方法を示しています。
.slider { width: 100%; overflow: hidden; position: relative; height: 400px; } .slider-wrapper { width: 100%; height: 100%; position: relative; } .slide { position: absolute; width: 100%; height: 100%; opacity: 0; } .slider-wrapper > .slide:first-child { opacity: 1; }
純粋なJSでは、各スライドのCSS遷移を登録する必要があります。
.slide { float: left; position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms linear; }
jQueryでは、fadeIn（）およびfadeOut（）メソッドを使用するには、不透明度と表示を変更する必要があります。
.slide { float: left; position: absolute; width: 100%; height: 100%; display: none; } .slider-wrapper > .slide:first-child { display: block; }
jQueryのコードは次のとおりです。
(function( $ ) { $.fn.slideshow = function( options ) { options = $.extend({ wrapper: ".slider-wrapper", previous: ".slider-previous", next: ".slider-next", slides: ".slide", nav: ".slider-nav", speed: 500, easing: "linear" }, options); var slideTo = function( slide, element ) { var $currentSlide = $( options.slides, element ).eq( slide ); $currentSlide. animate({ opacity: 1 }, options.speed, options.easing ). siblings( options.slides ). css( "opacity", 0 ); }; //... }; })( jQuery );
不透明度をアニメートするときは、残りのスライドのこのプロパティの値も変更する必要があります。
JavaScriptでは、次のようになります。
Slideshow.prototype = { //... _slideTo: function( slide ) { var currentSlide = this.slides[slide]; currentSlide.style.opacity = 1; for( var i = 0; i < this.slides.length; i++ ) { var slide = this.slides[i]; if( slide !== currentSlide ) { slide.style.opacity = 0; } } }, //... };
例
jQuery：フェードスライドショー
JavaScript：フェードスライドショー
表示要素：ビデオ
スライドショーにビデオを含めることができます。 Vimeoのビデオスライドショーの例を次に示します。
<div class="slider-wrapper"><!— --> <div class="slide"> <iframe src="https://player.vimeo.com/video/109608341?title=0&byline=0&portrait=0" width="1024" height="626" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div><!-- slides --> <div class="slide"> <iframe src="https://player.vimeo.com/video/102570343?title=0&byline=0&portrait=0" width="1024" height="576" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> <div class="slide"> <iframe src="https://player.vimeo.com/video/97620325?title=0&byline=0&portrait=0" width="1024" height="576" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> </div>
ビデオはiframeを介して含まれます。 これは、画像と同じ交換可能なインラインブロックです。 置換可能-コンテンツは外部ソースから取得されるため。
フルページのスライドショーを作成するには、次のようにスタイルを変更する必要があります。
html, body { margin: 0; padding: 0; height: 100%; min-height: 100%; /* */ } .slider { width: 100%; overflow: hidden; height: 100%; min-height: 100%; /* */ position: absolute; /* */ } .slider-wrapper { width: 100%; height: 100%; /* */ position: relative; } .slide { float: left; position: absolute; width: 100%; height: 100%; } .slide iframe { display: block; /* */ position: absolute; /* */ width: 100%; height: 100%; /* */ }
例
jQuery：全ページ動画スライドショー
JavaScript：全ページ動画スライドショー
自動スライドショー
自動スライドショーはタイマーを使用します。 関数がsetInterval（）タイマーにコールバックするたびに、カーソルが1ずつ増加するため、次のスライドが選択されます。
カーソルがスライドの最大数に達したら、ゼロにリセットする必要があります。
無限のスライドショーは、ユーザーをすばやく悩ませます。 ユーザーがアニメーションの上にカーソルを置いたときにアニメーションを停止し、カーソルが離れたときにアニメーションを復元するのが最善の方法です。
jQueryの場合：
(function( $ ) { $.fn.slideshow = function( options ) { options = $.extend({ slides: ".slide", speed: 3000, easing: "linear" }, options); var timer = null; // var index = 0; // var slideTo = function( slide, element ) { var $currentSlide = $( options.slides, element ).eq( slide ); $currentSlide.stop( true, true ). animate({ opacity: 1 }, options.speed, options.easing ). siblings( options.slides ). css( "opacity", 0 ); }; var autoSlide = function( element ) { // timer = setInterval(function() { index++; // 1 if( index == $( options.slides, element ).length ) { index = 0; // } slideTo( index, element ); }, options.speed); // , .animate() }; var startStop = function( element ) { element.hover(function() { // clearInterval( timer ); timer = null; }, function() { autoSlide( element ); // }); }; return this.each(function() { var $element = $( this ); autoSlide( $element ); startStop( $element ); }); }; })( jQuery );
.stop（）メソッドの両方のパラメーターがtrueに設定されているのは、シーケンスからアニメーションキューを作成する必要はありません。
純粋なJSでは、コードはよりシンプルになります。特定の期間で各スライドのCSS遷移を登録します。
.slide { transition: opacity 3s linear; /* 3 = 3000 */ }
コードは次のようになります。
(function() { function Slideshow( element ) { this.el = document.querySelector( element ); this.init(); } Slideshow.prototype = { init: function() { this.slides = this.el.querySelectorAll( ".slide" ); this.index = 0; // this.timer = null; // this.action(); this.stopStart(); }, _slideTo: function( slide ) { var currentSlide = this.slides[slide]; currentSlide.style.opacity = 1; for( var i = 0; i < this.slides.length; i++ ) { var slide = this.slides[i]; if( slide !== currentSlide ) { slide.style.opacity = 0; } } }, action: function() { var self = this; // Initializes the sequence self.timer = setInterval(function() { self.index++; // 1 if( self.index == self.slides.length ) { self.index = 0; // } self._slideTo( self.index ); }, 3000); // , CSS }, stopStart: function() { var self = this; // self.el.addEventListener( "mouseover", function() { clearInterval( self.timer ); self.timer = null; }, false); // self.el.addEventListener( "mouseout", function() { self.action(); }, false); } }; })();
例
jQuery：自動スライドショー
JavaScript：自動スライドショー
キーボードナビゲーション
高度なスライドショーでは、キーボードコントロール、つまり ボタンに触れるだけでスライドを反転します。私たちにとって、これは単にキー押下イベントの処理を登録する必要があることを意味します。
これを行うには、イベントオブジェクトのkeyCodeプロパティを使用します。押されたキーのコード（コードのリスト）を返します。
ボタン「Previous」と「Next」にアタッチしたイベントは、キー「left」と「right」にアタッチできます。jQuery：
$( "body" ).on( "keydown", function( e ) { var code = e.keyCode; if( code == 39 ) { // $next.trigger( "click" ); } if( code == 37 ) { // $previous.trigger( "click" ); } });
純粋なJSでは、単純な.trigger（）メソッドの代わりに、dispatchEvent（）を使用する必要があります。
document.body.addEventListener( "keydown", function( e ) { var code = e.keyCode; var evt = new MouseEvent( "click" ); // if( code == 39 ) { // self.next.dispatchEvent( evt ); } if( code == 37 ) { // self.previous.dispatchEvent( evt ); } }, false);
まともなプロジェクトでは、これは慣習ではありません。publicメソッドでスクロールを提供する機能を設定し、ボタンをクリックしてそれを呼び出す必要があります。次に、プログラムの別の部分にこの機能を実装する必要がある場合、DOMイベントをエミュレートする必要はありませんが、このメソッドを呼び出すだけで済みます。
例
jQuery：キーボード スライドショーJavaScript：キーボード
スライドショー
コールバック
このアクションの実行時に実行されるスライドショーの任意のアクションにコードを添付できると便利です。これがコールバック関数の目的です-特定のアクションが発生したときにのみ実行されます。スライドショーに署名があり、デフォルトで非表示になっているとします。アニメーションの時点で、現在のスライドのキャプションを表示するか、それを使って何かをする必要があります。
jQueryでは、次のようなコールバックを作成できます。
(function( $ ) { $.fn.slideshow = function( options ) { options = $.extend({ //... callback: function() {} }, options); var slideTo = function( slide, element ) { var $currentSlide = $( options.slides, element ).eq( slide ); $currentSlide. animate({ opacity: 1 }, options.speed, options.easing, // options.callback( $currentSlide ) ). siblings( options.slides ). css( "opacity", 0 ); }; //... }; })( jQuery );
この場合、コールバックは、現在のスライドを引数として使用する.animate（）の関数です。使用方法は次のとおりです。
$(function() { $( "#main-slider" ).slideshow({ callback: function( slide ) { var $wrapper = slide.parent(); // $wrapper.find( ".slide-caption" ).hide(); slide.find( ".slide-caption" ).show( "slow" ); } }); });
純粋なJSの場合：
(function() { function Slideshow( element, callback ) { this.callback = callback || function() {}; // Our callback this.el = document.querySelector( element ); this.init(); } Slideshow.prototype = { init: function() { //... this.slides = this.el.querySelectorAll( ".slide" ); //... //... }, _slideTo: function( slide ) { var self = this; var currentSlide = self.slides[slide]; currentSlide.style.opacity = 1; for( var i = 0; i < self.slides.length; i++ ) { var slide = self.slides[i]; if( slide !== currentSlide ) { slide.style.opacity = 0; } } setTimeout( self.callback( currentSlide ), 500 ); // } }; // })();
コールバック関数は、コンストラクターの2番目のパラメーターとして定義されます。次のように使用できます。
document.addEventListener( "DOMContentLoaded", function() { var slider = new Slideshow( "#main-slider", function( slide ) { var wrapper = slide.parentNode; // var allSlides = wrapper.querySelectorAll( ".slide" ); var caption = slide.querySelector( ".slide-caption" ); caption.classList.add( "visible" ); for( var i = 0; i < allSlides.length; ++i ) { var sld = allSlides[i]; var cpt = sld.querySelector( ".slide-caption" ); if( sld !== slide ) { cpt.classList.remove( "visible" ); } } }); });
例
jQuery：コールバック関数を 使用したスライドショーJavaScript：コールバック関数を
使用したスライドショー
外部API
これまでのところ、私たちのシナリオは単純です：すべてのスライドは既にドキュメントにあります。外部（YouTube、Vimeo、Flickr）からデータを挿入する必要がある場合は、外部コンテンツを受け取ったときにその場でスライドに記入する必要があります。
サードパーティのサーバーからの応答がすぐに反映されない場合があるため、プロセスが進行中であることを示すために読み込みアニメーションを挿入する必要があります。
<div class="slider" id="main-slider"><!-- --> <div class="slider-wrapper"><!-- --> </div> <div class="slider-nav"><!-- "" "" --> <button class="slider-previous"> </button> <button class="slider-next"> </button> </div> <div id="spinner"></div><!— --> </div>
gifまたは純粋なCSSアニメーションの場合があります。
#spinner { border-radius: 50%; border: 2px solid #000; height: 80px; width: 80px; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; } #spinner:after { content: ''; position: absolute; background-color: #000; top:2px; left: 48%; height: 38px; width: 2px; border-radius: 5px; -webkit-transform-origin: 50% 97%; transform-origin: 50% 97%; -webkit-animation: angular 1s linear infinite; animation: angular 1s linear infinite; } @-webkit-keyframes angular { 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);} } @keyframes angular { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } #spinner:before { content: ''; position: absolute; background-color: #000; top:6px; left: 48%; height: 35px; width: 2px; border-radius: 5px; -webkit-transform-origin: 50% 94%; transform-origin: 50% 94%; -webkit-animation: ptangular 6s linear infinite; animation: ptangular 6s linear infinite; } @-webkit-keyframes ptangular { 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);} } @keyframes ptangular { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
手順は次のとおりです。-
外部からのデータの要求
-ローダーの非表示
-データの解析-HTMLの
構築
-スライドショーの表示
-スライドショーの処理
YouTubeから最新のユーザービデオを選択したとします。 jQuery：
(function( $ ) { $.fn.slideshow = function( options ) { options = $.extend({ wrapper: ".slider-wrapper", //... loader: "#spinner", //... limit: 5, username: "learncodeacademy" }, options); //... var getVideos = function() { // YouTube var ytURL = "https://gdata.youtube.com/feeds/api/videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON( ytURL, function( videos ) { // JSON $( options.loader ).hide(); // var entries = videos.feed.entry; var html = ""; for( var i = 0; i < entries.length; ++i ) { // HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace( "http://gdata.youtube.com/feeds/api/videos/", "" ); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += "<div class='slide'>"; html += "<iframe src='" + ytEmbedURL + "' frameborder='0' allowfullscreen></iframe>"; html += "</div>"; } $( options.wrapper ).html( html ); // - }); }; return this.each(function() { //... getVideos(); // - }); }; })( jQuery );
純粋なJavaScriptには、JSONメソッドを作成するという追加のステップがあります。
(function() { function Slideshow( element ) { this.el = document.querySelector( element ); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.loader = this.el.querySelector( "#spinner" ); //... this.limit = 5; this.username = "learncodeacademy"; }, _getJSON: function( url, callback ) { callback = callback || function() {}; var request = new XMLHttpRequest(); request.open( "GET", url, true ); request.send( null ); request.onreadystatechange = function() { if ( request.status == 200 && request.readyState == 4 ) { var data = JSON.parse( request.responseText ); // JSON object callback( data ); } else { console.log( request.status ); } }; }, //... }; })();
その後、手順は同様です。
(function() { function Slideshow( element ) { this.el = document.querySelector( element ); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.loader = this.el.querySelector( "#spinner" ); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); }, _getJSON: function( url, callback ) { callback = callback || function() {}; var request = new XMLHttpRequest(); request.open( "GET", url, true ); request.send( null ); request.onreadystatechange = function() { if ( request.status == 200 && request.readyState == 4 ) { var data = JSON.parse( request.responseText ); // JSON object callback( data ); } else { console.log( request.status ); } }; }, //... getVideos: function() { var self = this; // YouTube var ytURL = "https://gdata.youtube.com/feeds/api/videos?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON( ytURL, function( videos ) { // JSON var entries = videos.feed.entry; var html = ""; self.loader.style.display = "none"; // for( var i = 0; i < entries.length; ++i ) { // HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace( "http://gdata.youtube.com/feeds/api/videos/", "" ); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += "<div class='slide'>"; html += "<iframe src='" + ytEmbedURL + "' frameborder='0' allowfullscreen></iframe>"; html += "</div>"; } self.wrapper.innerHTML = html; // - }); }, actions: function() { var self = this; self.getVideos(); // - } }; })();
例
jQuery：外部APIの使用
JavaScript：外部APIの使用
おわりに
スライドショーは、ユーザーエクスペリエンスを向上させる興味深い機会です。あまり遠くに行かないと、ユーザーは数回クリックするだけでサイト上の目的のコンテンツをすばやく見つけることができます。また、Revolution SliderやNivo Sliderなどのスライドショーは、サイトの視覚的なコンポーネントを豊かにする方法を示しています。しかし、このような複雑なプロジェクトを構築するには、まず基本を理解する必要があります。
例
Github