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>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 - то вам сюда.
Ссылки
