Стильный слайдер с автопрокруткой

Скрипты

Рисунок Стильный слайдер с автопрокруткой
Стильный слайдер с автопрокруткой Стильный слайдер с автопрокруткой
оценка: 4.2 из 5
оценок: 20

На днях наткнулся на видеоролик, снятый КВН-щиками. В конце был интересный эффект вместо титров. Действующие лица прокручивались в 3 картинки с эффектом растворения. Это породило идею реализовать стильный слайдер на основе jQuery.

Сама идея. Обычный прямоугольный блок с черным фоном определенного размера. В нем размещены одинаковые по размерам 3 блока. В каждом из них можно разместить любой контент, будь то картинка, текст, ссылки или комбинированный набор тегов. Изначально блоки не видны. Анимация происходит в несколько этапов:

  • плавное отображение блока №1;
  • плавное отображение блока №2;
  • одновременное отображение блока №3 и растворение блока №1;
  • растворение блока №2;
  • растворение блока №3 и замена содержимого блоков на следующий контент;
  • повторение действий с первого пункта.

Реализацию слайдера можно увидеть на следующем примере:



Стильный слайдер от SzenProgs.ru.

Может прокручивать сотни фотографий в ограниченном пространстве.

Версия слайдера №3



А теперь расскажу, как этот скрипт стильного слайдера установить на сайт.

Для начала нужно подключить jQuery на страницу. Если jQuery у вас уже подключен, переходите ко второму этапу. jQuery подключается следующим кодом:

Code
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Теперь нужно разместить на странице сайта блок с контентом, в котором и будет происходить слайдинг. Его нужно разместить там, где должен стоять слайдер. Блок оформляем так:

Code
<div style="background: #000000; color: #ffffff;" id="spslider3">
  <a href="http://szenprogs.ru/" title="Переход по ссылке"><img src="/scripts/spslider3/picture01.jpg" width="200" align="middle" alt=""></a>
  <img src="http://szenprogs.ru/scripts/spslider3/picture02.jpg" width="200" align="middle" alt="">
  <img src="http://szenprogs.ru/scripts/spslider3/picture03.jpg" width="200" align="middle" alt="">
  <img src="http://szenprogs.ru/scripts/spslider3/picture04.jpg" width="200" align="middle" alt="">
  <img src="http://szenprogs.ru/scripts/spslider3/picture05.jpg" width="200" align="middle" alt="">
  <img src="http://szenprogs.ru/scripts/spslider3/picture06.jpg" width="200" align="middle" alt="">
  <div><p>Стильный слайдер от <a href="http://szenprogs.ru/blog/stilnyj_slajder_s_avtoprokrutkoj/2011-05-09-101">SzenProgs.ru</a>. <p>Может прокручивать сотни фотографий в ограниченном пространстве. <p>Версия слайдера №3</div>
</div>

Важно сделать общий блок с уникальным идентификатором ID. В нашем случае это spslider3. Внутрь этого блока уже можно размещать любые комбинации тегов. Важное условие при размещении тегов: в слайдере будут крутиться все дочерние элементы основного блока. Тоесть, если вы хотите разместить в слайдер группу тегов, то обрамляйте их тегом DIV.

Цвет фона, шрифт и все другие CSS параметры основного блока можете прописать свои. Главное условие - не задавать блоку в CSS ширины, высоты и внутренних полей. Они все равно будут перекрыты скриптом.

Сразу после основного блока размещаем следующий скрипт:

Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/spslider3/spslider3.js"></script>
<script type="text/javascript"><!--
  $spslider3.ready(2000,'spslider3',150,300,10);
// -->
</script>

Параметры вызова функции $spslider3.ready(speed, id, width, height, padding):

  • speed - скорость смены затухания и появления контента в слайдере, задается в миллисекундах.
  • id - имя ID основного блока.
  • width - ширина каждого из 3-х внутренних блоков, задается в пикселях.
  • height - высота каждого из 3-х внутренних блоков, задается в пикселях.
  • padding - Поля между основным блоком и внутренними блоками, задается в пикселях.

Это достаточные условия, чтобы скрипт стильного слайдера заработал. Скрипт вы можете перенести на свой хост. Убедительная просьба, если публикуете этот скрипт, оставляйте информацию о создателе. Мне будет обидно, если мой труд кто-то присвоит.

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Стильный слайдер с автопрокруткой
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:8776
Рейтинг:4.2/20
Дата добавления:2011-05-09 18:34, Понедельник
Добавил:Szen
Теги:рисунки, картинки, слайдер

Мини-форум

№ 02011-05-09 18:34
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Стильный слайдер с автопрокруткой".
Гость
Учавствовать в обсуждении "Стильный слайдер с автопрокруткой" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким файл-хостингом вы пользуетесь?
Всего ответов: 393
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 7
Гостей: 6
Пользователей: 1

NiklKl
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz