июля 2, 2009 Добавил admin
Слайдер картинок на jQuery
Нашел интересный слайдер картинок который используеться на www.kruskica.net. Отличие этого плагина от стандартного jQuery это Fade in/Fade out (затухание и постепенное появление картинки). Плагин проверялся на всех основных браузерах и везде работал). В принципе я не удевлен, сложного то в нем все равно ничего нет! Но симпотично.
Установка
Качаем jQuery с офф. сайта
HEADER
1 2 | <script src="js/jquery.js" type="text/javascript"></script> <script src="js/s3Slider.js" type="text/javascript"></script> |
HTML
1 2 3 4 5 6 7 8 | <div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="#" alt="" /> <span>Your text comes here</span></li> <li class="s3sliderImage"> <img src="#" alt="" /> <span>Your text comes here</span></li> </ul> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | #s3slider { width: 400px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #s3sliderContent { width: 400px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: 0; /* important */ } .s3sliderImage { float: left; /* important */ position: relative; /* important */ display: none; /* important */ } .s3sliderImage span { position: absolute; /* important */ left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 374px; background-color: #000; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ top: 0; /* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ } .clear { clear: both; } |
Теперь необходимо установить время показа картинки на сайте. Время указывается в миллисекундах.
1 2 3 4 5 | $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 4000 }); }); |
Все, наш слайдер готов к работе! Успехов в исспользовании.
Просмотреть пример слайдер картинок
Скачать слайдер картинок на jQurey
Схожие по теме, может быть интересным:
ПРОСМОТРОВ: 1,409
Эта статья была добавлена Четверг, июля 2, 2009 в 20:48 и расспологается в разделе CSS, сайтостроение. Вы можете следить за всеми событиями через RSS 2.0. Вы можете оставить ответ, или трекбек с Вашего собственного сайта.
Эта статья была добавлена Четверг, июля 2, 2009 в 20:48 и расспологается в разделе CSS, сайтостроение. Вы можете следить за всеми событиями через RSS 2.0. Вы можете оставить ответ, или трекбек с Вашего собственного сайта.
Коментариев (7)
Хотелось бы послушать твое мнение!
Оставить комментарий
Это твой шанс выговориться!

Зайдите ко мне
августа 8, 2009
Спорить
а куда этот код вставить??
помогите плз
$(document).ready(function() {
$(’#s3slider’).s3Slider({
timeOut: 4000
});
});
Зайдите ко мне
августа 8, 2009
Спорить
Все спустя пару часов разобрался,
Но хоть написали бы что этот код в head ставить надо как
Зайдите ко мне
августа 9, 2009
Спорить
Я рад что все закончилось хорошо!)))))
Зайдите ко мне
сентября 23, 2009
Спорить
Спасибо огромное, статья супер.
Зайдите ко мне
сентября 24, 2009
Спорить
Очень полезный блог, автор всегда (почти) описывает актальные темы. Спасибо.
Зайдите ко мне
сентября 24, 2009
Спорить
“Спасибо”
Зайдите ко мне
октября 15, 2009
Спорить
Интересно
).. хоть что-то отвлекло от этой долбанной сессии
…