Скрипты для сайта

Скрипты для сайта

Главная | Регистрация | Вход

Приветствую Вас Гость | RSS

Меню сайта

Теги HTML

Терминология языка HTML
Теги HTML по алфавиту
Теги HTML по типу
Уроки HTML начинающим

CSS

Введение в стили CSS
Параметры шрифта и фона
Отображения текста
Отступы,рамки и выделение
Параметры абзацев,списков
Параметры таблиц
Специальные селекторы

Реклама

Все для сайта

Все для графики
Меню и навигация
Слайдеры и слайдшоу
Кнопки и иконки
Tooltips
Аудио и видео плееры
Формы и таблицы

TinyFader - слайдшоу


TinyFader - слайдшоу Существует так-же "Широкоформатный слайдер". Хотя я настоятельно рекомедую использовать минимальный размер. Он как раз приведен в этом примере. Либо cредний, он так-же не влияет на скорость загрузки страниц. И значительно четче, в отличии от широкоформатного, отображает изображения. <link rel="stylesheet" type="text/css" href="style.css"> JAVASCRIPT: <script type="text/javascript" src="http://samouchka-html.ucoz.ru/SCRIPT/tinufader.js"></script> <script type="text/javascript" src="http://samouchka-html.ucoz.ru/SCRIPT/123321.js"></script> <script type="text/javascript" src="http://samouchka-html.ucoz.ru/SCRIPT/148.js"></script> <script type="text/javascript"> var slideshow=new TINY.fader.fade('slideshow',{ id:'slides', auto:3, resume:true, navid:'pagination', activeclass:'current', visible:true, position:0 }); </script> CSS код: <style type="text/css"> * {margin:0; padding:0} body {font:12px Verdana,Arial; color:#555; background:#222 url(../image/bg.gif) 50% 0 no-repeat} p {line-height:1.4; margin-bottom:12px} #wrapper {width:578px; margin:75px auto} .sliderbutton {float:left; width:32px; padding-top:134px} .sliderbutton img {cursor:pointer} .sliderbutton img:hover {background:#666} #slideshow {float:left; width:500px; height:300px; border:2px solid #FF0000; background:#fff} #slides {position:relative; width:500px; height:300px; list-style:none; overflow:auto} #slides li {width:500px; height:300px} .pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px} .pagination li {float:left; cursor:pointer; padding:5px 8px; background:#666; border:1px solid #999; margin:0 4px 0 0; text-align:center; color:#222} .pagination li:hover {background:#777; border:1px solid #bbb; color:#000} li.current {border:1px solid #ccc; background:#888} li#content {width:464px; height:270px; padding:15px 18px 15px 18px; background:#fff} #content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#0F0} </style> Листинг <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> Предпросмотр Скачать

Заработай сейчас!

Заработай сейчас

Навигация по сайту

Поиск по сайту

Друзья сайта

Самоучитель html
Все для веб-мастера
Музыка для души
Мир развлечений
Скачать кино бесплатно!
Видеоклипы online

Хостинг от uCoz

Avon

Присоединяйтесь
к Avon