[решено]Как данный ефект CSS сделать для виджета?

автор Gamatos Июль 24th 2011, 16:40

Как этот html http://wmdn.ru/javascript/smooth-changing-rotate-images-script-on-jquery/ можно засунуть в виджет?

автор Домовой Июль 24th 2011, 18:02

Создай виджет, поставь туда

Код:: <style type="text/css"> div#rotator {position:relative; height:110px; margin-left: -10px;} div#rotator ul li {float:left; position:absolute; list-style: none; list-style: none;} </style> <div id="rotator"> <ul> <li class="show"> <img src="http://savepic.net/635292.jpg" width="160" height="107" alt="pic1" /></li> <li><img src="http://savepic.net/624028.jpg" width="160" height="107" alt="pic2" /></li> <li> <img src="http://savepic.net/616860.jpg" width="160" height="107" alt="pic3" /></li> </ul> </div>

Строчка
<img src="http://savepic.net/635292.jpg" width="160" height="107" alt="pic1" /></li>
картинка - её ширина - её высота

В Модули - Управление кодами Javascript
создай Javascript и вставь туда:

Код:: function theRotator() { // Устанавливаем прозрачность всех картинок в 0 $('div#rotator ul li').css({opacity: 0.0}); // Берем первую картинку и показываем ее (по пути включаем полную видимость) $('div#rotator ul li:first').css({opacity: 1.0}); // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд setInterval('rotate()',5000); } function rotate() { // Берем первую картинку var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); // Берем следующую картинку, когда дойдем до последней начинаем с начала var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); // Расскомментируйте, чтобы показвать картинки в случайном порядке // var sibs = current.siblings(); // var rndNum = Math.floor(Math.random() * sibs.length ); // var next = $( sibs[ rndNum ] ); // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); // Прячем текущую картинку current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { // Запускаем слайдшоу theRotator(); });