s3slider jQuery плагин - слайдер изображений
Скрипты для UCOZ / Другие скрипты
s3Slider jQuery плагин сделан на основе скрипта слайд-шоу от jd. Если вам нужно что-то подобное для вашего сайта, то s3Slider как раз то, что вам нужно.
Как это работает
Все очень просто. Во-первых, подключите библиотеку jQuery, затем и скрипт s3Slider в head теге сайта.
jQuery можно скачать с домашней страницы.
Code
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>
Важно: Для корректной работы скрипта, должен соблюдаться ряд правил.
HTML
Code
<div id="<span>s3slider</span>">
<ul id="<span>s3slider</span><strong>Content</strong>">
<li class="<span>s3slider</span><strong>Image</strong>">
<img src="#" />
<span><span></span>Your text comes here<span></span></span>
</li>
<li class="<span>s3slider</span><strong>Image</strong>">
<img src="#" />
<span><span></span>Your text comes here<span></span>
</li>
<div class="clear <span>s3slider</span><strong>Image</strong>"></div>
</ul>
</div></span>
Пояснение
Если вы установили основной div ID, как s3slider, как мы cделали здесь, то это имя, должно быть префиксом и для всех других классов и ID для этого конкретного слайд-шоу. Например, если вы установите ID для основных div как 'your_name', то внутренний ID должен быть 'your_nameContent' и классом '.your_nameImage', как в приведенном выше примере.
Во-вторых, каждый '.your_nameImage' элемент должен иметь потомка span.
Кроме того, последний div с классом 'clear' также должен иметь класс '.your_nameImage'.
Если вы этого не сделаете, то последние изображение НЕ будет показано в слайд-шоу.
CSS
Code
#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;
/*
если
top: 0; -> бокс с текстом появится вверху картинки
если
bottom: 0; -> бокс с текстом появится внизу картинки
*/
}
.clear {
clear: both;
}
Затем вам нужно инициализировать s3Slider и установить продолжительность показа одной фотографии (значение в миллисекундах).
JS
Code
<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>
Скачать с DFiles
Скачать с ya.ru