Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JQuery / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Красивый слайдер для текста

В этом уроке я хотел бы вам показать красивый слайдер для контента, который  может оказаться очень удобным, если его содержимое можно разбить на части (вступление, основная часть, заключение).

Итак, начнем. Скачиваем все нужные нам файлы. В начале странички подключаем необходимые для работы компоненты:

<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript">
</script>

<script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider()
});
</script>

Теперь нужно здесь же прописать путь до таблицы стилей, иначе ничего работать не будет:

<link href="style.css" rel="stylesheet" type="text/css">

Хорошо, теперь займемся окном, в котором будет отображаться все содержимое страницы:

<div class="slider-wrap">      <div id="slider1" class="csw">           <div class="panelContainer">                Контент контент контент.           </div>      </div> </div>

Наконец-то можно создать несколько вкладок:

<div class="panel" title="Панель 1">      <div class="wrapper">           <h3>Панель 1</h3>           <p>Ваш текст</p>           <p><a href="#5" class="cross-link" title="Переход на панель 5">
Предыдущая</a> |
<a href="#2" class="cross-link" title="Переход на панель 2">
Следующая</a></p>      </div> </div> <!-- Вторая панель --> <div class="panel" title="Панель 2">      <div class="wrapper">           <h3>Панель 2</h3>           <p>Ваш текст</p>           <p><a href="#1" class="cross-link" title="Переход на панель 1">
Предыдущая</a> |
<a href="#3" class="cross-link" title="Переход на панель 3">
Следующая</a></p>      </div> </div>

Параметр title отображает название вкладок. При желании ниже Вашего текста можно прописать ссылки на предыдущую и следующую страницы. Если Вы хотите изменить цвет вкладок, то в файле style.css поменяйте следующие значения:

.stripNav li.tab1 a {background: #60f;} – цвет неактивной вкладки
.stripNav li a:hover {background: #333;} – цвет вкладки при наведении мыши
.stripNav li a.current {background: #000; color: #fff;} - цвет активной вкладки

На этом можно закончить наш урок, надеюсь такой слайдер, где-нибудь пригодится.

Автор: Евгений Бочкарев Урок добавлен: 19 Августа 2009 в 18:39 Просмотров: 22284

Условия копирования материалов сайта

Все комментарии
#-1 apeks 13-09-2010 в 19:35
Не понятно
#0 mikesoup 23-12-2010 в 08:36
а интересно, можно ли сюда вставить картинки ?
#1 Евгений 23-12-2010 в 12:40
Думаю можно, хотя я не пробовал.
#2 Женя 29-03-2011 в 09:12
Евгений, думаю хорошо, если будет ссылка на сайт производителя данного скрипта
#3 Женя 29-03-2011 в 09:12
PS при выставлении рейтинга за урок возникают проблемы с кодировками.
#4 Ангел 09-07-2014 в 10:33
Более подробно уроки надо писать, я вот удаляю все лишние стили и прикручиваю к своему сайту, но из этой статьи не понятно что можно удалить, а что оставить. Приходится во всем самой копаться и время тратить
#5 Кум 15-06-2015 в 14:32
Не работает

#6 03-03-2016 в 13:23

Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки