Создание простых слайд-шоу с использованием 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; }

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

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);
 });
});

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

Автор кода: davidwalsh.name/mootools-slideshow

Microsoft неустанно развивает и создает инструменты для веб-разработчиков, выпуская новые версии фреймворков. Информации много, поэтому важно ее систематизировать как на ресурсе coding4.net — создание сайтов на ASP.NET MVC. Там можно прочесть новости о выходе новых бесплатных CMS, написанных на C#.

Для чего всё это? Для полного контроля над выводимым HTML. Более «легкие» приложения. MVC позволяет легко тестировать программный код, посредством полного разделения логики от представления данных.