[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: FeRz1k  
Форум » Вэбмастерам » Скрипты для uCoz » Слайдер новостей на Jquery (Модуль: Разное)
Слайдер новостей на Jquery
PhoenixДата: Четверг, 19.05.2011, 03:19 | Сообщение # 1
Ph0en1x aka Good'1k
Постов на форуме: 1449
Репутация:
[ 218 ]
Подарки:
[ 81 ]
Не в сети
Скрипи позволяет демонстрировать лучшее содержание вашего сайта или блога, новостей, желательно таким образом, чтобы оно выглядело просто, красиво и удобно. Использование автоматического воспроизведения содержимого в виде слайдера, является одним из способов удачной демонстрации. Это экономит пространство вашего сайта и делает пользование вашим сайтом более удобным.

Установка:

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

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

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

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

Code
<div id="featured" >      

   <ul class="ui-tabs-nav">      

   <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1">      
   <img src="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="#fragment-2">      
   <img src="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="#fragment-3">      
   <img src="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="#fragment-4">      
   <img src="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="images/image1.jpg" alt="" />      

   <div class="info" >      

   <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>      

    

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

   </div>      

   </div>      

   <!-- Second Content -->      

   <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">      

   <img src="images/image2.jpg" alt="" />      

   <div class="info" >      

   <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>      

    

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

   </div>      

   </div>      

   <!-- Third Content -->      

   <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">      

   <img src="images/image3.jpg" alt="" />      

   <div class="info" >      

   <h2><a href="#" >35 Amazing Logo Designs</a></h2>      

    

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

   </div>      

   </div>      

   <!-- Fourth Content -->      

   <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">      

   <img src="images/image4.jpg" alt="" />      

   <div class="info" >      

   <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>      

    

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

   </div>      

   </div>      

   </div>

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

Code
#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.

Code
<script type="text/javascript">      
   $(document).ready(function(){      

   $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);      

   });      
   </script>

Вот, что у вас должно получиться! Пример

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

Прикрепления: 21431325423.rar(48.6 Kb)


Команда - это капитан и игроки сплоченные вместе и чем больше вы будете помогать друг другу не только в игре но и в реальной жизни, тем приятнее и выше будет подъем к вершинам киберспортивного олимпа.
 
Форум » Вэбмастерам » Скрипты для uCoz » Слайдер новостей на Jquery (Модуль: Разное)
  • Страница 1 из 1
  • 1
Поиск:
Статистика сайта
Последние новости Самые отвечаемые темы Последние статьи
EA раскрыла подробно... 18.04.2013
Bethesda прекращает ... 18.04.2013
Создатели World of T... 18.04.2013
Battlefield 4 не буд... 18.04.2013
Авторы Silent Hill: ... 18.04.2013
Курилка! 103
Общая тема для обсуждений 67
Изготовление аваторов 50
Новости сервера 37
Команда сайта 36
История Starcraft: Н... 10.02.2013
Почему в Valve решил... 20.08.2012
Танки рвутся в кибер... 15.08.2012
Лучшие финалы в исто... 17.06.2012
Киберспорт - спорт? ... 14.04.2012
Новые пользователи Активные пользователи Лучшие комментаторы
voodyy28 01.09.2017
qteras23 25.08.2017
156464 25.08.2017
Sergeeff 23.08.2017
Areon 20.08.2017
Phoenix 1449
FeRz1k 319
WedMacK 200
warcraf 200
Rolex 157
Phoenix 56
FeRz1k 56
koJIxo3Huk 19
Die 13
scool 9