В разработку слайд-шоу на JavaScript Разработка веб-сайтов

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 += "

";
html += "";
html += "

";
}

$( 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 += "

";
html += "";
html += "

";
}

self.wrapper.innerHTML = html; // Выводим слайд-шоу

});

},
actions: function() {
var self = this;

self.getVideos();

// Обрабатываем слайд-шоу
}




};
})();




Примеры

jQuery: использование внешнего API
JavaScript: использование внешнего API



Заключение

Слайд-шоу – интересная возможность улучшить пользовательский опыт. Если не перебарщивать с ними, они позволят пользователю быстро найти нужный контент на сайте всего за несколько кликов. Также слайд-шоу навроде Revolution Slider или Nivo Slider демонстрируют, как можно обогатить визуальную составляющую сайта. Но для построения таких сложных проектов сначала необходимо разобраться с основами.