Как запустить скрипт смены изображений, если логотип прошит в файле CSS
Здравствуйте. Хочу на главной сайта изменить главный баннер со статичного на динамичный, с плавно меняющимися кадрами.
Брал как образец эту статью http://wmdn.ru/javascript/smooth-cha...ipt-on-jquery/ Код такой: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Простая замена картинок с помощью JQuery</title> <style type="text/css"> div#rotator {position:relative; height:150px; margin-left: 15px;} div#rotator ul li {float:left; position:absolute; list-style: none;} div#rotator ul li.show {z-index:500;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Автор Dylan Wagstaff, [url]http://www.alohatechsupport.net[/url] --> <script type="text/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(); }); </script> </head> <body> <div id="rotator"> <ul> <li class="show"><a href="http://google.ru/"><img src="images/image-1.jpg" width="500" height="313" alt="pic1" /></a></li> <li><a href="http://yandex.ru/"><img src="images/image-2.jpg" width="500" height="313" alt="pic2" /></a></li> <li><a href="http://nigma.ru/"><img src="images/image-3.jpg" width="500" height="313" alt="pic3" /></a></li> </ul> </div> </body> </html> Но зашел в тупик, так как там где у меня в коде страницы главный баннер, значится не собственно картинка вроде logo.jpg, а класс, который зашит в файле CSS. <div id="logo"></div> а в файле styles.css Вот такое: #logo { background: #ffffff url(images/header.jpg) 10px 3px no-repeat; width: 761px; height: 117px; float: left; text-align: left; padding-top: 100px; padding-left: 40px; } Как я могу корректно прописать скрипт на странице, если все данные о изображении хранятся в styless.css? |
Часовой пояс GMT +3, время: 15:09. |