Главная | Регистрация | Сделать стартовой | Добавить в закладки on
Навигация
Топ 50 Лучших девушек

Топ 50 самых сексуальных девушек
Социальные закладки
Онлайн Сервисы
Популярные новости
» Свежие ключи для Eset Nod3
» Свежие ключи для Касперско
» ESET NOD32 Mobile Security
» AIMP v3.55 Build 1345 + Po
» YoWindow Unlimited Edition
» The Bat! Professional Edit
» Internet Download Manager
» IObit Malware Fighter Pro
» CCleaner Free / Profession
» CCleaner 4.12 Build 4657
FreeOn Portal - Главная » Всё для Компа » Для вебмастера » Возможность скачать бесплатно
*** Рады приветствовать Вас на нашем сайте ***
Меню сайта для ПК
 Игры | Games [667/+0]
 Программы | Programs [1185/+0]
 Музыка | Music [440/+0]
 Приколы | Humour [71/+0]
 Интересное | Interesting [385/+0]
 Для Вебмастера [69/+0]
 Флеш игры | Flash games [49/+0]
 Платный раздел [4/+0]
 Фильмы | Films [1508/+0]
 Сериалы | Serials [155/+0]
 Видео | Video [159/+0]
 Клипы | Clips [118/+0]
 Обои | Wallpaper [135/+0]
 Статьи | Articles [379/+0]
 Книги | Books [72/+0]
 Разное | Raznoe [196/+0]
Всё для Компа » Для вебмастера : Слайдер новостей на jQuery (Автоматический)

Слайдер новостей на jQuery (Автоматический)



Для тех кто давно мечтал поставить на свой сайт автоматический слайдер контента, предлагаю вам один из способов реализации используя технологию Jquery.

Для тех кто не знаком и не видел его в действии: Пример

И так переходим к установке скрипта на сайт:

Шаг 1. Добавление файлов javascript
Вставьте код расположенный ниже, между тегами . Благодаря нему вы подключите библиотеку jQuery.

<script type="text/javascript"    
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>    

<script type="text/javascript"    
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>


Шаг 2. Создаём рекомендуемую структуру содержания.
Теперь давайте создадим содержание для автоматического слайдера, которое будет структурировано как перечень, расположенный в левой части слайдера и содержащий в себе превью контента и его описание.

<div id="featured" >    
<ul class="ui-tabs-nav">    

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href= http://freeon.in.ua/"#fragment-1">    
<img src= http://freeon.in.ua/"images/image1-small.jpg" alt="" />    
<span>15+ Excellent High Speed Photographs</span></a></li>    

<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href= http://freeon.in.ua/"#fragment-2">    
<img src= http://freeon.in.ua/"images/image2-small.jpg" alt="" />    
<span>20 Beautiful Long Exposure Photographs</span></a></li>    

<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href= http://freeon.in.ua/"#fragment-3">    
<img src= http://freeon.in.ua/"images/image3-small.jpg" alt="" />    
<span>35 Amazing Logo Designs</span></a></li>    

<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href= http://freeon.in.ua/"#fragment-4">    
<img src= http://freeon.in.ua/"images/image4-small.jpg" alt="" />    
<span>Create a Vintage Photograph in Photoshop</span></a></li>    

</ul>    

<!-- First Content -->    
<div id="fragment-1" class="ui-tabs-panel" style="">    
<img src= http://freeon.in.ua/"images/image1.jpg" alt="" />    
<div class="info" >    
<h2><a href= http://freeon.in.ua/"#" >15+ Excellent High Speed Photographs</a></h2>    

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.    
Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href= http://freeon.in.ua/"#" >read more</a></p>    

</div>    
</div>    

<!-- Second Content -->    

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">    
<img src= http://freeon.in.ua/"images/image2.jpg" alt="" />    
<div class="info" >    
<h2><a href= http://freeon.in.ua/"#" >20 Beautiful Long Exposure Photographs</a></h2>    

<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor.    
Sed ipsum lorem, sagittis non egestas id, suscipit....<a href= http://freeon.in.ua/"#" >read more</a></p>    

</div>    
</div>    

<!-- Third Content -->    
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">    
<img src= http://freeon.in.ua/"images/image3.jpg" alt="" />    
<div class="info" >    
<h2><a href= http://freeon.in.ua/"#" >35 Amazing Logo Designs</a></h2>    

<p>liquam erat volutpat. Proin id volutpat nisi.    
Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href= http://freeon.in.ua/"#" >read more</a></p>    

</div>    
</div>    

<!-- Fourth Content -->    
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">    
<img src= http://freeon.in.ua/"images/image4.jpg" alt="" />    
<div class="info" >    
<h2><a href= http://freeon.in.ua/"#" >Create a Vintage Photograph in Photoshop</a></h2>    

<p>Quisque sed orci ut lacus viverra interdum ornare sed est.    
Donec porta, erat eu pretium luctus, leo augue sodales....<a href= http://freeon.in.ua/"#" >read more</a></p>    

</div>
</div>
</div>


Шаг 3. Создание таблицы стилей CSS.
Создайте таблицу стилей CSS и поместите в неё кодовую часть из этого шага. Параметры height и width - это значение ширины и высоты возпроизводимого содержания, а параметр padding-right позволяет сделать отступ вправо для помещения на это место навигации контента.

#featured{    
width:400px;    
padding-right:250px;    
position:relative;    
height:250px;    
background:#fff;    
border:5px solid #ccc;    
}    

#featured ul.ui-tabs-nav{    
position:absolute;    
top:0; left:400px;    
list-style:none;    
padding:0; margin:0;    
width:250px;    
}    

#featured ul.ui-tabs-nav li{    
padding:1px 0; padding-left:13px;    
font-size:12px;    
color:#666;    
}    

#featured ul.ui-tabs-nav li img{    
float:left; margin:2px 5px;    
background:#fff;    
padding:2px;    
border:1px solid #eee;    
}    

#featured ul.ui-tabs-nav li span{    
font-size:11px; font-family:Verdana;    
line-height:18px;    
}    

#featured li.ui-tabs-nav-item a{    
display:block;    
height:60px;    
color:#333; background:#fff;    
line-height:20px;    
}    

#featured li.ui-tabs-nav-item a:hover{    
background:#f2f2f2;    
}    

#featured li.ui-tabs-selected{    
background:url('images/selected-item.gif') top left no-repeat;    
}    

#featured ul.ui-tabs-nav li.ui-tabs-selected a{    
background:#ccc;    
}    

#featured .ui-tabs-panel{    
width:400px; height:250px;    
background:#999; position:relative;    
}    

#featured .ui-tabs-panel .info{    
position:absolute;    
top:180px; left:0;    
height:70px;    
background: url('images/transparent-bg.png');    
}    

#featured .info h2{    
font-size:18px; font-family:Georgia, serif;    
color:#fff; padding:5px; margin:0;    
overflow:hidden;    
}    
#featured .info p{    
margin:0 5px;    
font-family:Verdana; font-size:11px;    
line-height:15px; color:#f0f0f0;    
}    

#featured .info a{    
text-decoration:none;    
color:#fff;    
}    

#featured .info a:hover{    
text-decoration:underline;    
}    

#featured .ui-tabs-hide{    
display:none;    
}


Шаг 4. Подключения javascript кода , позволяющего автоматически пролистывать содержимое.
Вставьте код расположенный ниже сразу же после кода из шага 1.

<script type="text/javascript">    
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);    
});    
</script>


Изменение цифрового значения, позволит Вам изменить скорость пролистывания.

Вот и всё, автоматический слайдер готов к применению.

Спасибо за внимание и до новых встреч!





 (голосов: 3)
Добавил Добавил: pro100zero | Просмотров Просмотров: 5397 | Дата Дата: 27 ноября 2010 | Комментов Комментов : (0)   
Похожие публикации:
Комментарий к новости:
Ваше Имя:
Ваш E-Mail:
Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Введите код:

 
Информер новинок
загрузка...
Панель управления

Логин:
Пароль:

Регистрация | Напомнить
Информер новинок
загрузка...
Администрация

Наши проекты
4life.in.ua 4Life - Еще один новостной портал в нашем исполнени :), где мы выкладываем только отборные новости, фильмы, игры которые вы всегда сможете скачать бесплатно без регистрации. Evonews Evonews - второй проектик к Вашему вниманию, все как и раньше стараемся для вас выкладывая только стоящую информацию, интересные статьи, факты события и многое другое для вашего все общего развития. Посещаем, развиваемся и советуем другим) EvoGame EvoGame - сайт полностью посвященный играм и все что с ними связано, а именно игровые обзоры, прохождение, видео и многое другое без ограничений и заморочек. Так же проводим акции, так что не упустите свой шанс проявить себя. Так что скачиваем игры и делимся с товарищам ссылочкой)

Powered by FreeOn Portal © 2009 Дизайн От " Skyline-edition "
Сайт несет информативный характер. Администрация не несет ответственности за содержание информации, размещаемой пользователями ресурса. Если вы являетесь правообладателем свяжитесь с Нами, мы будем рады помочь вам в закрытии доступа к такому контенту.