• Страница 1 из 1
  • 1
Форум » uCoz » Слайдера » слайдер изображений (JQ + CSS)
слайдер изображений (JQ + CSS)
Дмитрий Дата: Суббота, 01.09.2012, 23:39 | Сообщение # 1 | Сообщить о нерабочей теме


Аватар для Дмитрий

Регистрация:03.12.2011
Страна: Российская Федерация
Репутация:  14
Сообщений: 1421
Награды: 4 +
Статус:
[spoiler="Скрин"]

[Увеличеть]
[/spoiler]

Слайдер изображений, прост в использовании, очень легок. Использует базовый JQ.

Код
/* Слайдер от 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}


JS:

Код
// Slider by ILyeS     
     function block_off(){$('.block img').hide()};     
     function block_on(a){$('.block img:'+a).fadeIn(300)};     
     block_on('eq(0)')


Код:

Код
<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 и соответствующее им количество переключателей.
Помните, что номер переключателя начинается с 0.

Ширина изображений 400px.
From Russia With Love!
Форум » uCoz » Слайдера » слайдер изображений (JQ + CSS)
  • Страница 1 из 1
  • 1
Поиск: