TinyFader - слайдшоу
Небольшое и полностью автономное ответвление от TinySlider реализующее слайдшоу с эффектом растворения (fade).
В шапке подключаем CSS и jаvascript файлы:
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/jаvascript" src="tinyfader.js"></script>HTML
<div id="wrapper">
<div>
<div class="sliderbutton"><img src="images/left.gif" width="32" height="38" alt="Назад" onclick="slideshow.move(-1)" /></div>
<div id="slideshow">
<ul id="slides">
<li id="content">
<h1>TinyFader - простое слайдшоу</h1>
<p>Очень легковесный (1.5 KB) скрипт слайдшоу, который можно оформить с помощью CSS. Вы можете добавить любой контент не только изображения.</p>
</li>
<li><img src="photos/1.jpg" width="500" height="300" alt="Мустанг" /></li>
<li><img src="photos/2.jpg" width="500" height="300" alt="Мустанг" /></li>
<li><img src="photos/3.jpg" width="500" height="300" alt="Мустанг" /></li>
</ul>
</div>
<div class="sliderbutton"><img src="images/right.gif" width="32" height="38" alt="Вперед" onclick="slideshow.move(1)" /></div>
</div>
<ul id="pagination" class="pagination">
<li onclick="slideshow.pos(0)">1</li>
<li onclick="slideshow.pos(1)">2</li>
<li onclick="slideshow.pos(2)">3</li>
<li onclick="slideshow.pos(3)">4</li>
</ul>
</div>JS
Инициализируем скрипт:
var slideshow=new TINY.slider.slide('slideshow',{
id:'slides', // ID of the parent slideshow unordered list
auto:3, // Seconds to auto-advance, defaults to disabled
resume:true, // Resume after interrupted, defaults to false
navid:'pagination', // Optional ID of direct navigation UL
activeclass:'current', // If navid, class to set on the current LI
visible:true, // Initially display the first slide vs fading it in
position:0 // Initial slide position, defaulting to the 0 index
});Ссылки
