Sliderman - слайдшоу #1
Первый вариант слайдшоу построенном на sliderman. Навигация и описание к изображениям отображается всегда.
Эффекты: matrix (10x5), TopRight, задержка 10 мс.
В шапке подключаем файлы:
<script type="text/jаvascript" src="js/sliderman.1.3.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/sliderman.css" />HTML
<div id="SliderName">
<a href="#1"><img src="img/1.jpg" title="Описание" /></a>
<div class="SliderNameDescription">
<img src="img/2.jpg" height="40" style="float:left;margin-right:5px;" />
<strong>Пенни (Кейли Куоко)</strong>
Молодая привлекательная девушка 22-х лет, соседка Леонарда и Шелдона.
</div>
<a href="#2"><img src="img/2.jpg" /></a>
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<div class="SliderNameDescription">По гороскопу Стрелец.</div>
</div>
<div id="SliderNameNavigation"></div>- <div id="SliderName_1"> - основной элемент, внутри которого находятся изображения.
- <div id="SliderNameNavigation"></div> - место для навигации.
JS
<script type="text/jаvascript">
// мы создали новый эффект и назвали его 'demo01', и будем использовать его дальше.
Sliderman.effect({name: 'demo01', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});
var demoSlider = Sliderman.slider({container: 'SliderName', width: 640, height: 300, effects: 'demo01',
display: {
pause: true, // остановка слайдшоу при наведении курсора мыши
autoplay: 3000, // 3 секунды на смену слайда
always_show_loading: 200,
description: {background: '#ffffff', opacity: 0.5, height: 50, position: 'bottom'}, // настройки описания к изображениям
loading: {background: '#000000', opacity: 0.2, image: 'img/loading.gif'}, // настройки окна загрузки
buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // настройки кнопок Вперед/Назад
navigation: {container: 'SliderNameNavigation', label: ' '} // настройки навигации
}});
</script>Хотите узнать больше, например API sliderman - то вам сюда.
Ссылки
