TINYFADER - СЛАЙДШОУ


TINYFADER - СЛАЙДШОУ


Небольшое и полностью автономное ответвление от TinySlider реализующее слайдшоу с эффектом растворения (fade).

В шапке подключаем CSS и javascript файлы:
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" 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>


javascript
Инициализируем скрипт:
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
});


Скачать исходник:
tinyfader_slideshow.rar


скрипт скрипт TINYFADER - СЛАЙДШОУ
Статистика
0  
Всего статей 1026
0  
Всего комментариев 57
0  
Пользователей 4
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация