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


Понравилась статья? Поделиться с друзьями:
Комментарии: 8
  1. Юлия

    Не работает Ваш скрипт…

  2. FORTRESS-DESIGN (автор)

    У меня тоже сначала не работал, пока я не отключил другой скрипт на jQuery.

  3. Юлия

    jQuery скриптов нет, mootools.js подключен (v.1.12).

    Могли бы Вы показать в работе этот скрипт?

    1. Валерий
  4. FORTRESS-DESIGN (автор)

    Да, конечно. Вот на этом сайте http://www.medibor.com/ua/ я сделал слайд-шоу без применения флеш.

  5. Юлия

    Спасибо! Заработало! =)

    Просто обновила версию mootools

    1. FORTRESS-DESIGN (автор)

      ОК :) Покажите, как получилось.

  6. Роман

    Спасибо, сделал сам — все встало нормально! А готовые галереи никак не получалось вставить, видимо в php настройки еще были какие-то.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: