Слайдер картинок на jQuery

июля 2, 2009 Добавил admin

Нашел интересный слайдер картинок который используеться на 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; -&gt; the box with text will be shown at the top of the image

if you put

bottom: 0; -&gt; 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. Вы можете оставить ответ, или трекбек с Вашего собственного сайта.

Коментариев (7)

Хотелось бы послушать твое мнение!

Зайдите ко мне

августа 8, 2009

Спорить

pdemon говорит:

а куда этот код вставить??
помогите плз
$(document).ready(function() {
$(’#s3slider’).s3Slider({
timeOut: 4000
});
});
Зайдите ко мне

августа 8, 2009

Спорить

pdemon говорит:

Все спустя пару часов разобрался,
Но хоть написали бы что этот код в head ставить надо как
Зайдите ко мне

августа 9, 2009

Спорить

admin говорит:

Я рад что все закончилось хорошо!)))))
Зайдите ко мне

сентября 23, 2009

Спорить

KinoPoto говорит:

Спасибо огромное, статья супер.
Зайдите ко мне

сентября 24, 2009

Спорить

warazoff говорит:

Очень полезный блог, автор всегда (почти) описывает актальные темы. Спасибо.
Зайдите ко мне

сентября 24, 2009

Спорить

Star говорит:

“Спасибо”
Зайдите ко мне

октября 15, 2009

Спорить

Hafodax говорит:

Интересно ).. хоть что-то отвлекло от этой долбанной сессии …