Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Прокрутка баненров, слайдер изображений

Предыдущая тема Следующая тема Перейти вниз

Прокрутка баненров, слайдер изображений

Сообщение автор Сергей Александрович в Пт 6 Фев - 13:44

Так как многие старые браузеры не поддерживают тег <marquee>, а людям лень обновлять браузер или они считают, что сидеть на старой версии куда комфортнее чем на новой то будем решать этот вопрос.

Итак я не буду Вам рассказывать что такое прокрутка и как она работает. Я Вам расскажу как сделать более интересный эффект с растворением и проявлением. Для этого нам потребуется немного CSS, немного JS и много виджетов.

Итак часть первая.
Идем в каскадную таблицу стилей и ставим туда вот такой код
Код:

div#rotator {
    height:260px;
}
div#rotator ul li {
    float:right;
    position:absolute;
    list-style: none;
}
div#rotator ul li.show {
    z-index:500;
    border-radius: 9px;
}
Тут мы выставляем высоту блока.
height:260px - высота в моем случае 260 пикселей

С таблицей стилей разобрались быстро.
Теперь идем в шаблоны (у меня стоит в нижней части, но можете поставить в верхнюю часть перед закрывающим [/head](скобочки с <> я заменил на []) Если будете ставить в нижнюю часть то ставьте перед закрывающим тегом /body)
Сам код который мы будем вставлять очень прост для понимающих и легко понимаем для не знающих.
Код:

<script>
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()',3000);
}
 
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>
Именно в данном примере стоит показ 3 секунды (в самом верху цифра 3000), если надо больше то ставите больше. Так как у меня место заняло это много я сократил скрипт залив его на хостинг и получил вот такой пример с задержкой в 3 секунды
Код:
<script src="http://dvscr.ru/team.js"></script>


С поэзией непонятностей мы закончили. Теперь надо сотворить самое приятное во всем этом царстве красоты и плавности.
Создаем виджет и ставим в него вот такой код
Код:

<div id="rotator">
  <ul>
    <li class="show">Картинка или ссылка 1</li>
    <li>Картинка или ссылка 2</li>
    <li>Картинка или ссылка 3</li>
    <li>Картинка или ссылка 4</li>
    <li>Картинка или ссылка 5</li>
    <li>Картинка или ссылка 6</li>
    <li>Картинка или ссылка 7</li>
    <li>Картинка или ссылка 8</li>
      </ul>
</div>

У меня на тестовом форуме таким образом реализован виджет с баннерами.
В нем я заменял Картинка или ссылка 1 на коды 8 баннеров после чего ставил следующий блок. Таким образом у меня получалось что показываются 8 баннеров, плавно растворяются и показываются следующие 8 баннеров. Все очень плавно и красиво. При желании можно сделать эффект прозрачности. Кому нужен будет пример пишите в личку, дам ссылку.
avatar
Сергей Александрович
 

Мужчина

Сообщения : 598
Возраст : 51
Регистрация : 2014-11-03
Благодарности : 202

Без предупреждений

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения