Пятница, 29 Июня 2012 10:04

Плагин слайдера новостей от kate-land

Written by 
Оцени эту запись
(3 Голоса)

В данной статье мы рассмотрим слайдер новостей от kate-land. Слайдер содержит картинку новости, название, краткое содержание и кнопку "Читать". Слайды переключаются автоматически и при клике на переключатели.

 

 

 

Демо

 

 

Скачать

 

 

Структура слайдера такая:

 

  • Большая картинка новости, которая является ссылкой
  • Название, тоже ссылка
  • Краткое вступление, ссылка
  • Кнопка "читать", ссылка на статью
  • Переключатели

 

 

HTML код слайдера:

 

 

 
<div class="slider">
    <div class="slider_bg"></div>
    <div class="slider_inner">
        <div class="slider_photo left">
                <div class="slider_photo_item"><a href="/ссылка_на_статью"><img src="/путь_к_картинке" alt=""></a></div>
                <div class="slider_photo_item""><a href="/ссылка_на_статью"><img src="/путь_к_картинке" alt=""></a></div>
            </div>
        <div class="right">
            <div class="slider_right_items">
             <div class="slider_right_item">
                 <div class="slider_right_item_inner">
                     <div class="slider_name"><a href="/ссылка_на_статью">название_статьи</a></div>
                        <div class="slider_entry"><a href="/ссылка_на_статью"><p>краткое_описание_статьи</p></a></div>
                 </div>
                 <a href="/ссылка_на_статью" class="slider_readmore"><span></span>Читать</a>
             </div>
             <div class="slider_right_item">
                 <div class="slider_right_item_inner">
                     <div class="slider_name"><a href="/ссылка_на_статью">название_статьи</a></div>
                        <div class="slider_entry"><a href="/ссылка_на_статью"><p>краткое_описание_статьи</p></a></div>
                 </div>
                 <a href="/ссылка_на_статью" class="slider_readmore"><span></span>Читать</a>
            </div>
            </div>
            <div class="slider_switch">
                <ul>
                 <li class="active"><a href="javascript: void(0);"></a></li>
                    <li><a href="javascript: void(0);"></a></li>   <!--их количество должно соответствовать количеству слайдов-->
                </ul>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
 
 
При загрузке страницы у нас отображается первый слайдер и первая информация. Левая часть слайдера - это картинка. Правая часть - это название, ссылка на подробную статью и переключатели. При клике на переключатель, отображается соответствующий слайдер. Также они меняются автоматически через 5 секунд.
 
Блок с классом slider_photo_item содержит картинку. Блок с классом slider_right_item содержит само описание. Анимация переключения слайдов происходит отдельно для картинки и отдельно для описание. Слайдер анимирован при помощи fadeIn/fadeOut, то есть методом затухания.
 
 
CSS стили для слайдера:
 
 
.slider {
margin: 0px auto;
width: 990px;
position: relative;
height: 370px;
}
.slider_bg {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url(../images/slider_bg.png); z-index: -1;}
.slider_inner {
position: absolute; 
z-index: 99;
padding: 20px 25px;
}
.slider_inner .slider_photo .slider_photo_item {display: none;}
.right {
width: 300px; 
padding-left: 20px;
}
.slider_right_items {
height: 317px;
}
.slider_right_item {
display: none;
}
.slider_right_item_inner {height: 232px; overflow: hidden;}
.slider_name {
width: 300px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 36px; 
line-height: 36px;
color: #fff;
text-transform: uppercase;
margin-bottom: 10px;
}
.slider_name a {color: #fff;}
.slider_name a:hover {color: #b57ee7}
.slider_entry {
font-style: italic;
line-height: 18px;
font-size: 14px;
color: #b57ee7;
margin-bottom: 10px;
}
.slider_entry a {color: #b57ee7;}
.slider_entry a:hover {color: #fff} 
 
.slider_readmore {
background: #ffc90a;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
color: #243d66;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
padding: 7px 10px;
display: block;
float:left;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.slider_readmore span {
background: url(../images/readmore_ar.png);
display: block;
float: right;
width: 5px; height: 7px;
margin-left: 5px;
margin-top: 3px;
}
.slider_switch  ul {
clear:left;
margin: 0px;
padding: 0px;
}
.slider_switch  ul li {
display: block;
float:left;
margin-right: 5px;
}
.slider_switch  ul li a {
display: block;
width: 11px;
height: 11px;
background: #8e37de;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
margin-top: 2px;
}
.slider_switch  ul li a:hover {background: #6c06cb;}
.slider_switch  ul li.active a {
width: 13px; 
height: 13px;
background: #fff;
margin-top: 0px;
}
.slider_switch  ul li.active a:hover {background: #fff;}
 
 
В стилях мы скрываем блоки, содержащие картинку и описание. В самом файле первым задаем свойство display: block. Далее скрывать и показывать их будем при помощи jQuery. Для подключения библиотеки jQuery скачиваем файл с ее последней версией и подключаем в head документа:
 
<head>
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
</head>
 
<body>
</body>
</html>
 
Разберем подробнее скрипт слайдера:
 
 
$(function(){
function MainSlider(p){
$('.slider_switch ul li').removeClass('active');
$('.slider_switch ul li').eq(p).addClass('active');
$('.slider_photo .slider_photo_item').fadeOut(0);
$('.slider_photo .slider_photo_item').eq(p).fadeIn(800);
$('.slider_right_items .slider_right_item').fadeOut(0);
$('.slider_right_items .slider_right_item').eq(p).fadeIn(10);
}
 
function SliderAuto (){
var c;
var c2;
var b = $('.slider_switch ul li').size();
for(i=0;i<b-1;i++) {
if($('.slider_switch ul li').eq(i).hasClass('active')) {
c = i;
c2 = c+1;
}
}
if ($('.slider_switch ul li').eq(b-1).hasClass('active')) {
c = b-1;
c2 = 0;
}
MainSlider(c2);
}
 
$(document).ready(function(){
$('.slider_photo').css('height', '330px').css('overflow','hidden');
var i;
i=0;
var SliderInterval = new Array;
SliderInterval[i] = setInterval(SliderAuto,5000);
$('.slider_switch ul li').click(function(){
var n = $(this).index();
MainSlider(n);
clearInterval(SliderInterval[i]);
i=i+1;
SliderInterval[i] = setInterval(SliderAuto,5000);
});
});
});
 
 
Функция MainSlider занимается переключение слайдов - скрывает все и отображает слайд с нужным номером. Мы не используем идентификаторы или отдельные классы для разных слайдов, мы работаем с их порядковыми номерами. Если пользователь кликнул на третий переключатель, отображается третья картинка и третье описание.
 
 
Функция SliderAuto запускает постоянное переключение слайдов. Она определяет какой слайд активный в данный момент и, скрывая его, отображает следующий. Если активным явялется последний, то следующим отображается первый:
 
 
if ($('.slider_switch ul li').eq(b-1).hasClass('active')) {
c = b-1;
c2 = 0;
}
 
 
Здесь b - это количество слайдов, c - порядковый номер активного слайда.
 
Количество слайдов высчитывается автоматически:
 
 
var b = $('.slider_switch ul li').size();
 
Ссылки с переключателями находятся в элементах списка. Значение b вычисляется по количеству элементов этого списка.
 
 
Автоматическое переключение слайдов реализовано при помощи setInterval со значением 5000, то есть слайды переключаются каждые 5 секунд:
 
 
SliderInterval[i] = setInterval(SliderAuto,5000);
 
 
Для подключения слайдера новостей от kate-land на свой сайт, качаем его (ссылка выше), подключаем стили с скрипт:
 
 
 
<script type="text/javascript" src="/js/slider.js"></script>
<link href='style/style__slider.css' rel='stylesheet' type='text/css'>
 
 
Такой слайдер также можно подключить в динамическому сайту. Плагин поддается стилизации.
 
Если нужно изменить интервал автоматического переключения слайдов, найдите строчку
 
 
SliderInterval[i] = setInterval(SliderAuto,5000);
 
и измените там число 5000 на нужное. Интервал задается в миллисекундах, то есть 1000 = 1 сек.
 
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов