483 s3Slider jQuery плагин сделан на основе скрипта слайд-шоу от jd.
Если вам нужно что-то подобное для вашего сайта, то s3Slider как раз то, что вам нужно.
Как это работает
Все очень просто. Во-первых, подключите библиотеку jQuery, затем и скрипт s3Slider в head разделе сайта.
jQuery можно скачать с домашней страницы.
|
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 9 10 11 12 13 |
<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
|
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 |
#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
|
1 2 3 4 5 |
$(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 4000 }); }); |
Также есть еще подборка десятки лучших jQuery слайдеров.
