Основное меню

Создание красивого ротатора иконок

Первым шагом при создании ротатора иконок будет написание и внедрение DIV-блока с иконками в HTML-старницу, код который нужно вставить:

<div id="page">

<h1 id="logoh1"><center>Создание красивого ротатора иконок</center></h1>

<div id="menuCarousel">
<div class="arrow previous"></div>
<div class="arrow next"></div>

<div id="stage">
<a href="index.html" title="Главная страница">
<img class="default" src="images/menu/home.png" alt="Главная страница">
</a>
<a href="music.html" title="Музыка">
<img src="images/menu/music.png" alt="Музыка">
</a>
<a href="games.html" title="Игры">
<img src="images/menu/games.png" alt="Игры">
</a>
<a href="book.html" title="Книги">
<img src="images/menu/book.png" alt="Книги">
</a>
</div>
</div>

</div>

Немного разберем выше приведенный код:

<div id="menuCarousel"> - основной блок ротатора иконок;
<div class="arrow previous"></div> - кнопка поворота ротатора вправо;
<div class="arrow next"></div> - кнопка поворота ротатора влево;
<div id="stage"> </div> - блок расположения изображений;

Для того чтобы наш ротатор начал вращаться при нажатии на кнопки вправо/влево, нужно подключить библиотеку jQuery и скрипт, который и оживит весь процесс:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

И последний шаг в создании ротатора, задаем стили для него:

#menuCarousel{
height:390px;
margin:90px auto 120px;
position:relative;
width:800px;
}

#menuCarousel .arrow{
width:44px;
height:44px;
background:url('images/arrows.png') no-repeat;
position:absolute;
top:50%;
margin-top:-22px;
left:0;
cursor:pointer;
}

#menuCarousel .next{
background-position:right top;
left:auto;
right:0;
}

#menuCarousel .arrow:hover{ background-position:left bottom; }
#menuCarousel .next:hover{ background-position:right bottom; }

#stage{
left:50%;
margin-left:-350px;
position:absolute;
width:700px;
height:100%;
}

#stage img{
display:none;
border:none;
width:256px;
height:256px;
}

#stage .default{
display:block;
left:50%;
margin-left:-135px;
position:absolute;
}

#stage .animationReady{
display:block;
position:absolute;
top:0;
left:0;
}

Исходные файлы прилагаемые к статье можно скачать ниже. На этом этапе создание ротатора иконок при помощи jQuery окончено.

Скачать файл
размер файла: 234,91 Kb
cкачиваний: 34


Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.