20:54 Слайд шоу на jQuery |
Демонстрация =====> http://textbest.ucoz.ru/index1.html Для создании этого простого слайдера мы будет использовать только JQuery, JavaScript и немного CSS. Для начала давайте зададим простую HTML разметку <div id="slideshow"> <img src="http://textbest.ucoz.ru/demo/img0.jpg" alt="" class="active" /> <img src="http://textbest.ucoz.ru/demo/img1.jpg" alt="" /> <img src="http://textbest.ucoz.ru/demo/img2.jpg" alt="" /> <img src="http://textbest.ucoz.ru/demo/img3.jpg" alt="" /> </div> Теперь в ход пойдет CSS что бы изображения накладывались друг на друга будем использовать свойство z-index #slideshow { position:relative; height:350px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; } #slideshow IMG.active { z-index:10; } #slideshow IMG.last-active { z-index:9; } Связи с тем что мы используем абсолютное позиционирование нам нужно задать значение высоты слайд-шоу.Кроме того, обратите внимание на то что мы определили три различных z-index,впоследствии мы будем манипулировать ими в jQuery. Для анимации слайдера мы будем переключаться между каждой фотографией с заданной скоростью. Так давайте начнем с написания этой функции, что накладывает новое фото на предыдущее. Между тегами <head></head>,вставляем <script src="http://textbest.ucoz.ru/jquery-1.2.6.pack.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> Все наше простое слайд шоу работает,с заданной нами скоростью. |
|
Всего комментариев: 0 | |
загрузка.. |