Что тут говорить, плавно сменяющееся слайд-шоу может очень сильно увеличить визуальную привлекательность сайта при довольно небольших усилиях. Эффект чисто психологический. Взгляд привлекает любое движение и изменение, главное чтобы оно не было навязчивым и раздражающим.
Кроме чистого слайдшоу я решал задачу размещения некоего текста поверх него.
У меня получилось два варианта. Один с помощью чистого jQuery, и другой с помощью плагина CrossSlide.
jQuery + велосипед
=================================
СМОТРЕТЬ ДЕМО
Всего имеем 3 слайда, расположенных на 3-х разных div, которые соответственно имеют индекс в диапазоне 0..2. Таймер переключает видимость у этих дивов с помощью fadeToggle.
Исходный код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html> <head> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> <script> i=0; var timer = window.setInterval(function() { $("div.slide:eq("+i+")").fadeToggle("slow","linear"); if (i==2) { i=0;} else {i++;} $("div.slide:eq("+i+")").fadeToggle("slow","linear"); },1000); </script> </head><body> <div id="focus" style="width: 800px; height: 235px;"> <div ><h1 style="color:white; text-shadow: #555 1px 1px 5px;">Вниз по матушке по Волге .. </h1> <div class="slide" style="width: 800px; height: 235px; position: absolute; display: block; top: 0px; z-index: -1; background:url('http://img-fotki.yandex.ru/get/3613/alexandr2804.9/0_d2f9_e8320064_-1-XL')"></div> <div class="slide" style="width: 800px; height: 235px; position: absolute; display: none; top: 0px; z-index: -1; background:url('http://img-fotki.yandex.ru/get/3605/alexandr2804.7/0_a989_604b65e5_XL')"></div> <div class="slide" style="width: 800px; height: 235px; position: absolute; display: none; top: 0px; z-index: -1; background:url('http://img-fotki.yandex.ru/get/3512/alexandr2804.a/0_e38c_ee0245aa_XL')"></div> </div> </div> Текст, который идёт дальше </body></html> |
jQuery + CrossSlide
=================================
СМОТРЕТЬ ДЕМО
Реализация стандартная, согласно документации CrossSlide. В отличие от первого примера тут можно играть скоростью преобразования. Кроме того тут кроме обычного fading-эффекта можно делать движение слайдов в различные стороны и их масштабирование.
Обратите внимание, что кроме jQuery подключается файл плагина, который нужно предварительно скачать и положить в тёмное прохладное место.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html> <head> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> <script src="jquery.cross-slide.min.js"></script> <script> $(function() { $('#slideshow').crossSlide({ sleep: 3, fade: 3 }, [ { src: 'http://img-fotki.yandex.ru/get/3613/alexandr2804.9/0_d2f9_e8320064_-1-XL' }, { src: 'http://img-fotki.yandex.ru/get/3605/alexandr2804.7/0_a989_604b65e5_XL' }, { src: 'http://img-fotki.yandex.ru/get/3512/alexandr2804.a/0_e38c_ee0245aa_XL' } ]) }); </script> </head><body> <div style="position: relative; width: 800px; height: 235px;"> <div style="position: absolute; top: 0px; z-index: 1;"><h1 style="color:white; text-shadow: #555 1px 1px 5px;">Вниз по матушке по Волге .. </h1></div> <div id="slideshow" style="width: 800px; height: 235px; position: absolute; top: 0px; z-index: -1;"></div> </div> Текст, который идёт дальше </body></html> |
Посты по теме:
RSS-подписка