Шапка-слайдер
В этой статье приведено простое, но не часто применяемое в дизайнах сайтов решение, – создание “динамической” шапки (слайдер). Допустим, у вас есть несколько вариантов шапки для будущего сайта и все они отлично вписываются в дизайн сайта или, например, ваш сайт связан с фотографией. В этих и других случаях можно попробовать использовать на месте шапки какой-нибудь простой слайдер без дополнительных элементов, что позволит автоматически сменять различные варианты шапки сайта или её части. Главное, не переборщить, и не превратить шапку в набор пестрых баннеров.
Для решения поставленной задачи как нельзя пригодится “TinySlider” описание настроек, демо и исходные коды которого можно найти здесь: www.scriptiny.com/2009/12/slideshow-script/.
Так как описание приведено на английском языке, дальше вкратце напишу, о чем в нем говорится. – “Это легковесный (1.5 кБт) скрипт для создания слайд-шоу и его последующего встраивания в веб-сайт через CSS. Скрипт поддерживает автоматическое возобновление показа картинок в вертикальном или горизонтальном направлении по выбору.
Для инициализации сценария используются следующие строчки:
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider', // ID родительского div-a
auto:3, // Секунд до автоматической смены картинки
resume:true, // Возобновить автоматически после остановки
vertical:false, // Направление смены картинок
navid:'pagination', //ID навигации слайдера
activeclass:'current',
position:0 // Инициализация позиции слайда, по умолчанию 0
});
Сам скрипт слайдера можно скачать здесь: forum.leigeber.com/index.php?app=downloads&showfile=8 и здесь: sandbox.scriptiny.com/tinyslider2/tinyslider.js
Вставка в HTML-код в нужном месте (например после лого) происходит приблизительно так:
<div id="wrapper"> <div> <div id="slider"> <ul> <li id="ccontent"> <h1>Текст </br>тел.:, адрес:</h1> <p></p> </li> <li><img src="photos/000.jpg" width="750" height="101" alt="London1" /></li> <li><img src="photos/001.jpg" width="750" height="101" alt="Moskow1" /></li> <li><img src="photos/002.jpg" width="750" height="101" alt="London2" /></li> <li><img src="photos/003.jpg" width="750" height="101" alt="Moskow2" /></li> </ul> </div> </div> </div>
Код выше показывает пример слайдера без навигации и дополнительных элементов управления, — то что нужно для создания “динамической” шапки. Размер картинок задается стандартным образом. Пример скрипта с навигацией и кнопочками для листания вправо/влево, есть в ссылках приведенных выше.
Осталось разобраться со стилями. В CSS сайта, который будет приведен в качестве примера в конце статьи, часть отвечающая за слайдер имеет следующий вид:
/*SLIDER*/
#wrapper {width:750px; height:101px;margin-left:187px}
.sliderbutton {float:left; width:32px; padding-top:134px}
.sliderbutton img {cursor:pointer}
.sliderbutton img:hover {background:#666}
#slider {float:left; position:relative; overflow:auto; width:750px; height: 101px; border:0px solid #147; background:#e3edf6;}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:750px; height:101px; padding-right:10px}
.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#ccontent {width:750px; height:101px; margin-left:50px;align-text:center}
#ccontent h1 {font:22px Georgia,Verdana; margin-left:50px; color:#036;align-text:center}
Стиль оптимизирован под показ картинок размером 750х101 px. Понятно, что по желанию, его можно изменить под любые другие размеры слайдов.