Понедельник, 06.02.2012, 13:36
Проверенный
Очередной слайдер... Использует стандартный JQuery.
Из особенностей, можно подчеркнуть:
- Размер html кода очень мал, пару строк.
- Все картинки добавляются в теге img, могут быть ограничены в ссылку (Можно добавить title).
- Картинок, теоретически, может быть бесконечно много.
- Слайдер настраивается под любой размер картинок, только укажите его.
- Картинки сами подстраиваются под нужный размер (Сужаются, растягиваются).
- Кроссбраузерно (<!doctype html>), только IE (ослик) без градиента.
- Никакой графики, кроме ваших картинок.
Перед установкой смотрим демо - http://ilyes.ucoz.ru/demo/imgslide/ ( Анонс моего сайта  )
Установка:
CSS код:
Code
/* Слайдер изображений ILyeS */
/* Установите размер ваших картинок */
.sdr{width:400px;height:200px}
/* Остальной код */
.sdr{position:relative;padding:10px 10px 40px;border:1px solid #999;border-radius:10px;
background:#ccc;
background:linear-gradient(top, #eee, #aaa);
background:-moz-linear-gradient(top, #eee, #aaa);
background:-webkit-linear-gradient(top, #eee, #aaa);
background:-o-linear-gradient(top, #eee, #aaa);
background:-ms-linear-gradient(top, #eee, #aaa)
}
.sdrd{position:absolute;left:9px;top:10px;right:9px;bottom:40px;border:1px solid #333;border-radius:3px}
.sdrd img{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:none}
.sdrp{position:absolute;left:10px;bottom:10px;right:10px;height:18px}
.sdrp div{float:left;width:10px;height:10px;border-radius:8px;margin:0 2px;padding:3px;border:1px solid #999;
background:#aaa;
background:linear-gradient(top, #999, #ccc);
background:-moz-linear-gradient(top, #999, #ccc);
background:-webkit-linear-gradient(top, #999, #ccc);
background:-o-linear-gradient(top, #999, #ccc);
background:-ms-linear-gradient(top, #999, #ccc)
}
.sdrp div:hover{cursor:pointer;
background:#ff6;
background:linear-gradient(top, #ff6, #fc3);
background:-moz-linear-gradient(top, #ff6, #fc3);
background:-webkit-linear-gradient(top, #ff6, #fc3);
background:-o-linear-gradient(top, #ff6, #fc3);
background:-ms-linear-gradient(top, #ff6, #fc3)
}
.sdrpon{
cursor:default !important;
background:#ff6 !important;
background:linear-gradient(top, #ff6, #fc3) !important;
background:-moz-linear-gradient(top, #ff6, #fc3) !important;
background:-webkit-linear-gradient(top, #ff6, #fc3) !important;
background:-o-linear-gradient(top, #ff6, #fc3) !important;
background:-ms-linear-gradient(top, #ff6, #fc3) !important
}
/* -- */
JS код:
Code // Слайдер изображений ILyeS sdr=1 $(".sdr").ready(function(){$(".sdrd img").each(function(i){$('.sdrp').append('<div onclick="sdrf('+i+')"></div>')});sdrf(0)}) function sdrf(i){ if(sdr!=i){ $('.sdrd img').fadeOut(500) $('.sdrp div').removeClass('sdrpon') $('.sdrd img').eq(i).fadeIn(500) $('.sdrp div').eq(i).addClass('sdrpon') sdr=i }} // --
Установка на страницу:
Code <div class="sdr"><div class="sdrd"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> </div><div class="sdrp"></div></div>
В CSS коде укажите размер предполагаемых картинок ( Ширина и высота ).
Картинки прописывайте, как на примере. Можно дополнительно дописать к картинкам ссылки ( <a></a> ), подсказки и тп.
Автор ILyeS. Спасибо за внимание.
Копирайты соблюдать не требую. |
Пост отредактировал ILyeS - Понедельник, 06.02.2012, 13:38 |
|
|
