Sliderman - слайдшоу #1

Первый вариант слайдшоу построенном на sliderman. Навигация и описание к изображениям отображается всегда.
Эффекты: matrix (10x5), TopRight, задержка 10 мс.
В шапке подключаем файлы:

<script type="text/javascript" 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> - место для навигации.

javascript

<script type="text/javascript">
    // мы создали новый эффект и назвали его '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: '&nbsp;'} // настройки навигации
    }});
</script>

Хотите узнать больше, например API sliderman - то вам сюда.

СКАЧАТЬСкачек: 360
117,39 Kb
Кто скачал?

ДЕМОПосмотреть
пример