- Название:
- слайдер изображений (JQ + CSS)
- Категория:
- Слайдера
- Раздел:
- uCoz - Скрипты
- Просмотров:
- 3363
- Автор:
- Неизвестен
- Добавил:
- Дмитрий
- Комментов:
- 0
- Добавленно:
- 24.08.2013 в 15:23
- Теги:
- (JQ, изображений, css), слайдер
- Рейтинг:
Последнее на форуме
Последние материалы
слайдер изображений (JQ + CSS)
слайдер изображений (JQ + CSS)
Немножко о работе:
При запуске страницы, всегда, будет открывать первое изображение.
Скрипт кроссбраузерен.
Количество изображений можете выбрать сами, нужно только добавлять img и соответствующее им количество переключателей.
Помните, что номер переключателя начинается с 0.
Ширина изображений 400px.
В Css стили:
Код
/* Слайдер от ILyeS */
.block{background:#222;padding:10px 10px 0;border-radius:10px;width:400px}
.block img{border:0;display:none}
.block div{margin:10px auto 0;background:#ddd;padding:5px 0;width:100px;border-radius:10px 10px 0 0;text-align:center}
.block div a{text-decoration:none;color:#ddd;background:#222;border-radius:5px;padding:2px 5px}
.block div a:hover{background:#444}
.block{background:#222;padding:10px 10px 0;border-radius:10px;width:400px}
.block img{border:0;display:none}
.block div{margin:10px auto 0;background:#ddd;padding:5px 0;width:100px;border-radius:10px 10px 0 0;text-align:center}
.block div a{text-decoration:none;color:#ddd;background:#222;border-radius:5px;padding:2px 5px}
.block div a:hover{background:#444}
В самый верх сайта (Глобальный блок, верхняя часть сайта):
Код
<script type="text/javascript" src="http://gigabytes.clan.su/load-ucoz/skripts/fynkciy.js"></script>
Где желаете видеть слайдер:
Код
<div class="block">
<img src="url картинки">
<img src="url картинки">
<img src="url картинки">
<div>
<a href="javascript://" onclick="block_off();block_on('eq(0)')">1</a>
<a href="javascript://" onclick="block_off();block_on('eq(1)')">2</a>
<a href="javascript://" onclick="block_off();block_on('eq(2)')">3</a>
</div></div>
<img src="url картинки">
<img src="url картинки">
<img src="url картинки">
<div>
<a href="javascript://" onclick="block_off();block_on('eq(0)')">1</a>
<a href="javascript://" onclick="block_off();block_on('eq(1)')">2</a>
<a href="javascript://" onclick="block_off();block_on('eq(2)')">3</a>
</div></div>
Вот и все, не правда ли - очень легко и быстро.
Подождите немного, сейчас файл будет подготовлен, через |
секунд Вы получите ссылку на скачивание. |
Зарегистрированные пользователи уже качают в то время как вы ожидаете 16 секунд.
Всего комментариев:
| |