|
Легкий слайдер изображений
|
|
Воскресенье, 18.09.2011, 20:44
Проверенный
 Слайдер изображений, прост в использовании, очень легок. Использует базовый JQ.
CSS:
Code /* Слайдер от 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:
Code // Slider by ILyeS
function block_off(){$('.block img').hide()};
function block_on(a){$('.block img:'+a).fadeIn(300)};
block_on('eq(0)')
Код:
Code <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.
И снова, копирайты соблюдать не требую, но буду признателен. |
Пост отредактировал ILyeS - Воскресенье, 18.09.2011, 20:47 |
|
|
Воскресенье, 18.09.2011, 21:25
Проверенный
| Автор, за идею отлично. Но ИМХО, лучше флешку забабахать и не заморачиваццо )) |
|
Понедельник, 19.09.2011, 07:28
Проверенный
ILyeS,хороший слайдер , я в тебе и не сомневался ..
10\10
Только еще объясни в теме Нубам как изменять ширину и высоту слайдера |
|
Вторник, 20.09.2011, 16:03
Проверенный
Quote (HitMen) как изменять ширину
Quote (ILyeS) .block{background:#222;padding:10px 10px 0;border-radius:10px;width:400px}
Пишите ширину, в которой будут ваши картинки в px.
Высота меняется в зависимости от фото - сама. |
|
|
Заблокированные
| Шрифт изменить только у страниц и всё ок. Спасибо |
|
Четверг, 29.09.2011, 19:02
Пользователь
| Поставил , сразу слетает сайт , скажите возможно из-за ксс ? |
Руубик! |
|
Четверг, 29.09.2011, 19:16
Проверенный
| Рубик, Если только у тебя есть еще блоки с классом "block" |
|
|
Четверг, 29.09.2011, 19:20
Пользователь
ILyeS,Спасибо
попробую что-то сделать! |
Руубик! |
|
Четверг, 29.09.2011, 19:24
Заблокированные
|
Четверг, 29.09.2011, 21:50
Пользователь
| Проверил , все работает отлично ! |
I all be back
Me for you! |
|
Суббота, 01.10.2011, 20:47
Проверенный
| ставлю и все слетает ( |
Продаю 2 Домена на школьную тематику ,пишите в ЛС |
|
Понедельник, 03.10.2011, 18:14
Проверенный
Quote (АRА) ставлю и все слетает (
Quote (ILyeS) Рубик, Если только у тебя есть еще блоки с классом "block"
Или же, вы не упаковываете скрипт в теги скрипта:
Добавлено (03.10.2011, 18:14)
---------------------------------------------
У кого слетает, замените "block" в кодах:
Code /* Слайдер от ILyeS */
.blockslider{background:#222;padding:10px 10px 0;border-radius:10px;width:400px}
.blockslider img{border:0;display:none}
.blockslider div{margin:10px auto 0;background:#ddd;padding:5px 0;width:100px;border-radius:10px 10px 0 0;text-align:center}
.blockslider div a{text-decoration:none;color:#ddd;background:#222;border-radius:5px;padding:2px 5px}
.blockslider div a:hover{background:#444}
Code // Slider by ILyeS
function block_off(){$('.blockslider img').hide()};
function block_on(a){$('.blockslider img:'+a).fadeIn(300)};
block_on('eq(0)')
Code <div class="blockslider"> <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> |
|
|
Понедельник, 03.10.2011, 18:21
Проверенный
воо теперь работает  |
Продаю 2 Домена на школьную тематику ,пишите в ЛС |
|
Вторник, 28.02.2012, 12:49
Пользователь
Слайдер с помощью сервера.
http://imgur.com/a/gpu9Q/embed
<iframe class="imgur-album" width="100%" height="500" frameborder="0" src="http://imgur.com/a/gpu9Q/embed"></iframe> |
... |
|
Пятница, 16.03.2012, 18:28
Пользователь
| Подскажите нубу куда тулить JS? |
|
