Шапка-слайдер

28 Сен
2011

В этой статье приведено простое, но не часто применяемое в дизайнах сайтов решение, – создание “динамической” шапки (слайдер). Допустим, у вас есть несколько вариантов шапки для будущего сайта и все они отлично вписываются в дизайн сайта или, например, ваш сайт связан с фотографией. В этих и других случаях можно попробовать использовать на месте шапки какой-нибудь простой слайдер без дополнительных элементов, что позволит автоматически сменять различные варианты шапки сайта или её части. Главное, не переборщить, и не превратить шапку в набор пестрых баннеров. Для решения поставленной задачи как нельзя пригодится “TinySlider” описание настроек, демо и исходные коды которого можно найти здесь: www.scriptiny.com/2009/12/slideshow-script/. Так как описание приведено на английском языке, дальше вкратце напишу, о чем в нем говорится. – “Это легковесный (1.5 кБт) скрипт для создания слайд-шоу и его последующего встраивания в веб-сайт через CSS. Скрипт поддерживает автоматическое возобновление показа картинок в вертикальном или горизонтальном направлении по выбору. Для инициализации сценария используются следующие строчки:
<script type="text/javascript">
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
});
</script> ”
Сам скрипт слайдера можно скачать здесь: 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. Понятно, что по желанию, его можно изменить под любые другие размеры слайдов. Пример шапки-слайдера: t.autoskidki.info. Это как раз тот вариант, который больше похож на набор пестрых баннеров, но как пример сгодится. Хостинг слабенький. Возможен блогоэффект.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх