Geekly Articles each Day

JavaScriptスラむドショヌ開発の抂芁

この蚘事では、JavaScriptでスラむドショヌを䜜成するための基本原則、その䜜成元HTML、CSS、JavaScript、およびそれらを䜜成するために䜿甚される手法に぀いお説明したす。

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

Source: https://habr.com/ru/post/J251783/

More articles:


All Articles