Создание простых слайд-шоу с использованием MooTools

Один из отличных способов добавить динамичности любому веб-сайту является внедрение слайд-шоу или движущегося контента. Конечно, существует множество доступных плагинов, но многие из них будут слишком перегруженными, если вы хотите сделать простое слайд-шоу без средств управления или реакции на события. Мы попытаемся создать простое слайд-шоу, от которого будем отталкиваться в дальнейшем.

HTML

<div id="slideshow-container">
   <img src="slideshow/cricci1.jpg" alt="Christina Ricci" />
   <img src="slideshow/cricci2.jpg" alt="Christina Ricci" />
   <img src="slideshow/cricci3.jpg" alt="Christina Ricci" />
   <img src="slideshow/cricci4.jpg" alt="Christina Ricci" />
   <img src="slideshow/cricci5.jpg" alt="Christina Ricci" />
   </div>

HTML-код очень прост — один div слайд-шоу-контейнера и изображения, которые будут элементами слайд-шоу.

CSS

#slideshow-container	{ width:512px; height:384px; position:relative; }
#slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:1; }

Важно, чтобы были задана ширина и выстота контейнера слайд-шоу, поскольку он имеет относительное позиционирование. Элементы слайд-шоу должны иметь абсолютное позиционирование, а значения отступов сверху и слева равны 0.

MooTools Javascript

window.addEvent('domready',function() {

 /* Настройки */
 var showDuration = 3000;
 var container = $('slideshow-container');
 var images = container.getElements('img');
 var currentIndex = 0;
 var interval;

 /* прозрачность и постепенное исчезновение изображения */
 images.each(function(img,i){
  if(i > 0) {
   img.set('opacity',0);
  }
 });

 /* worker */

 var show = function() {
  images[currentIndex].fade('out');
  images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
 };

 /* start once the page is finished loading */

 window.addEvent('load',function(){
  interval = show.periodical(showDuration);
 });
});

Первый шаг в процессе создания слайд-шоу состоит в определении продолжительности шоу. Затем мы в цикле установливаем прозрачность изображения до 0, если это изображение не первое. Далее мы создать функцию, которая делает поочередное затухание текущего изображения.

davidwalsh.name

Больше на эту тему:

• Создание простых слайдов с использованием MooTools. Часть II: Управление и события
• Создание favicon

Если вам понравилась статья, можете порекомендовать ее друзьям, сделав ретвит, нажав на кнопку Google +1 или «Лайк» :).

«Искусство создания и продвижения сайтов».
Автор блога: Илья Соболь
 @fortresseo    RSS записей