2 311 Скрипты / Slider

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

Sliderman - слайдшоу #3
И третий вариант слайдшоу на sliderman.js. Отсутствуют кнопки навигации; 4 эффекта: top, right, bottom, left; а также "Rain", "Stairs", "Fade". Может использоваться в качестве простого промослайдера.

В шапке подключаем файлы:

<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_3" class="SliderName_3">
    <img src="img/01.jpg" width="800" height="200" alt="" title="" />
    <img src="img/02.jpg" width="800" height="200" alt="" title="" />
    <img src="img/03.jpg" width="800" height="200" alt="" title="" />
    <img src="img/04.jpg" width="800" height="200" alt="" title="" />
    <img src="img/05.jpg" width="800" height="200" alt="" title="" />
    <img src="img/06.jpg" width="800" height="200" alt="" title="" />
    <img src="img/07.jpg" width="800" height="200" alt="" title="" />
    <img src="img/08.jpg" width="800" height="200" alt="" title="" />
    <img src="img/09.jpg" width="800" height="200" alt="" title="" />
    <img src="img/10.jpg" width="800" height="200" alt="" title="" />
</div>
<div id="SliderName_3"> - основной элемент, внутри которого находятся изображения.

JS

<script type="text/jаvascript">
    demo3Effect1 = {name: 'myEffect31', top: true, move: true, duration: 400};
    demo3Effect2 = {name: 'myEffect32', right: true, move: true, duration: 400};
    demo3Effect3 = {name: 'myEffect33', bottom: true, move: true, duration: 400};
    demo3Effect4 = {name: 'myEffect34', left: true, move: true, duration: 400};
    demo3Effect5 = {name: 'myEffect35', rows: 3, cols: 9, delay: 50, duration: 100, order: 'random', fade: true};
    demo3Effect6 = {name: 'myEffect36', rows: 2, cols: 4, delay: 100, duration: 400, order: 'random', fade: true, chess: true};
    effectsDemo3 = [demo3Effect1,demo3Effect2,demo3Effect3,demo3Effect4,demo3Effect5,demo3Effect6,'blinds'];
    var demoSlider_3 = Sliderman.slider({container: 'SliderName_3', width: 800, height: 200, effects: effectsDemo3, display: {autoplay: 3000}});
</script>

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

Скачать 854Загрузок 325,6 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи