Слайдер изображений c помощью Sliderman.js
Скрипт позволяет построить демонстрацию изображений с функцией автоматического слайдшоу, но есть также возможность ручной прокрутки изображений. В нижней части слайдера расположен визуальный переключатель, который также может использоваться для смены картинок.
В слайдере реализована также возможность вывода описаний для изображений, как обычных текстовых, так и содержащих мини-картинку или ссылку.
Как обычно, в секции HEAD страницы нам нужно подключить файл стилей, а также сам скрипт
<style type="text/css">
.c { clear: both; }
</style>
<script type="text/javascript" src="/sliderman.js"></script>
<link rel="stylesheet" type="text/css" href="/sliderman.css" />
В тело страницы после тега bоdy вставляем код самого слайдера, а также скрипт-обработчик, отвечающий за эффекты при смене изображений
<div id="slider_container_1">
<div id="SliderName">
<a href="#1">
<img src="img/1.jpg" title="Description from Image Title" />
</a>
<div class="SliderNameDescription">
<img src="img/2.jpg" height="40" style="float:left;margin-right:5px;" />
<strong>Nulla luctus congue fermentum.</strong>
Integer <a href="javascript:void(0);">elementum</a> convallis lorem eu volutpat. Suspendisse fermentum arcu in lorem fringilla ultricies. Nam vel diam nisi.
</div>
<a href="#2">
<img src="img/2.jpg" />
</a>
<img src="img/3.jpg" />
<div class="SliderNameDescription"><a href="#3">Link</a></div>
<img src="img/4.jpg" />
<div class="SliderNameDescription"><strong>Nullam nec velit vel leo tristique commodo.</strong>
Nulla facilisi. Fusce lacus massa, ullamcorper sed hendrerit quis, venenatis eget tortor.</div>
</div>
<div class="c"></div>
<div id="SliderNameNavigation"></div>
<div class="c"></div>
<script type="text/javascript">
// we created new effect and called it 'demo01'. We use this name later.
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, // slider pauses on mouseover
autoplay: 3000, // 3 seconds slideshow
always_show_loading: 200, // testing loading mode
description: {background: '#ffffff', opacity: 0.5, height: 50, position: 'bottom'}, // image description box settings
loading: {background: '#000000', opacity: 0.2, image: 'img/loading.gif'}, // loading box settings
buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // Next/Prev buttons settings
navigation: {container: 'SliderNameNavigation', label: ' '} // navigation (pages) settings
}});
</script>
<div class="c"></div>
</div>
<div class="c"></div>
</div>
<div class="c"></div>
Как видим, в данном примере реализовано четыре способа вывода изображений:
- изображение с описанием под ним, содержащим мини-картинку (2.jpg) и ссылку
<img src="img/1.jpg" title="Description from Image Title" />
</a>
<div class="SliderNameDescription">
<img src="img/2.jpg" height="40" style="float:left;margin-right:5px;" />
<strong>Nulla luctus congue fermentum.</strong>
Integer <a href="javascript:void(0);">elementum</a> convallis lorem eu volutpat. Suspendisse fermentum arcu in lorem fringilla ultricies. Nam vel diam nisi.
</div>
- изображение без описания, являющееся само ссылкой
<img src="img/2.jpg" />
</a>
- изображение с описанием в виде обычного текста
<div class="SliderNameDescription"><strong>Nullam nec velit vel leo tristique commodo.</strong>
Nulla facilisi. Fusce lacus massa, ullamcorper sed hendrerit quis, venenatis eget tortor.</div>
</div>
- изображение, описание которого состоит из одной лишь ссылки
<div class="SliderNameDescription"><a href="#3">Link</a></div>
Оставь комментарий первым!
