Как сделать плагин слайдшоу при помощи jQuery

как сделать плагин слайдшоу при помощи jQueryЕсли вы часто используете плагин слайдшоу, то вам должно быть известно, что слайдшоу условно можно разделить на 2 основные группы. Первые это те у которых картинки сменяются при помощи эффекта «скольжения» , а вторые использует все остальные эффекты, к примеру угасание.

Этот урок посвящён созданию простого плагина слайдшоу.

Демка на официальном сайте источника и Готовый плагин.

1. Скачайте необходимые файлы с официального сайта (ссылка).

2. Распаковав, вы увидите следующий набор файлов: 3 папки (css, img, js) а также файл index. html.

набор файлов3. Основа.

Изначально слайдшоу будет представлять из себя список, который мы закодим при помощи html следующим образом.

<div id="slider">
    <img src="img/img1.jpg" title="caption" />
    <img src="img/img2.jpg" title="caption" />
    <img src="img/img3.jpg" title="caption" />
</div>

Для того чтобы слайдер заработал его необходимо вызвать.Внесите следующий код в файл scripts.js в папке js.

$(function(){
    $('#slider').powerSlide();
});

Выше представлен простой способ вызова слайдера. Ниже представлен вызов слайдера со специальными параметрами.

$(function(){
	
	$(function(){
		$('#slider').powerSlide({thumbs: false, bullets: true});
	});

});

Теперь взглянем на полную структуру нашего слайдшоу. Всё что нам необходимо показано на рисунке снизу. Изображение и описание должны располагаться в отдельном контейнере image, переключатели вместе с этим контейнером находятся в верхнем контейнере wrapper, блок навигации располагается отдельно от всех. И всё наше слайдшоу заключено в один большой блок container.структура слайдера

И так, при помощи jquery нам необходимо будет сгенерировать код, который опишет наше слайдшоу. Так выглядит этот код в HTML.

<div class="powerSlide">
    <div class="wrapper">
        <a href="" class="prev"></a>
        <a href="" class="next"></a>
        <div class="image">
            <img src="" alt="" />
            <p></p>
        </div>
    </div>
    <div class="nav"></div>
</div>

4. Открываем файл powerSlide.js, который находится в папке js и вставляем туда следующий код

(function($){
    $.fn.powerSlide = function(options { 
 
        var opt = {
            // Параметры
        };
 
        return this.each(function() {
            if (options) {
                $.extend(opt, options);
            }
            /* Здесь идёт код */
        });
    };
})(jQuery);

Опции (параметры) — это переменные, которые позволят вам настраивать внешний вид вашего слайдшоу. Вот список задаваемых параметров, которые мы хотим видеть и быстро изменять.
Вместо «//Параметры» вставьте следующий код:

'width': 908, // Ширина и высота изображения
'height': 340,
'position': 'bottom', //  Расположение панели навигации
'bullets': false, // Показать навигацию при помощи цифр
'thumbs':  true, //  Показать навигацию при помощи иконок
'row': 10, // Иконка на строку
'auto': true, //Авто ротация
'autoSpeed': 4000, // Скорость 4000 - 4 секунды
'fadeSpeed': 1000 //Скорость угасания 1000- 1 секунда

Для того чтобы использовать наши параметры,  необходимо к ним правильно обратиться, к примеру если мы хотим изменить высоту, то мы должны обратиться к ней следующим образом opt.height для высоты opt.width, для позиций opt.position и т.д.

5.  Теперь напишим код, который будет собирать нам слайдшоу из html блоков и в котором мы будем учитывать наши параметры.

/*  Здесь идёт описание основного контейнера (container) , a также блока wrapper 
-----------------------------------------------*/
$(this).children().wrapAll('<div class="powerSlide" />');
var container = $(this).find('.powerSlide');
container.find('img').wrapAll('<div class="wrapper" />');
var wrapper = container.find('.wrapper');
 
/* Добавляем кнопки навигации (след. и пред.)
-----------------------------------------------*/
wrapper.append('<a href="#" class="prev">Prev</a><a href="#" class="next">Next</a>');
 
/* Добавляем основную навигацию, учитывая её расположение, а также вставляем заголовки
-----------------------------------------------*/
switch (opt.position) { // Расположение навигации
        case 'top': container.prepend('<div class="nav" />'); break; // Вверху
        case 'bottom': container.append('<div class="nav" />'); break; // Снизу
}
 
var nav = container.find('.nav');
 
wrapper.find('img').each(function(i){
 
    i += 1; // Стартовый номер = 1
 Далее идёт список проверок условий на включения того или иного параметра
    if (opt.bullets === true) { // Навигация маркерами
            nav.append('<a href="#">'+ i +'</a>');
    }
 
    if (opt.thumbs === true) { //Навигация иконками
            nav.addClass('thumbs').append(
                '<img class="thumb" src="'+
                $(this).attr('src') +'" alt=""/>');
    }
 
    // Заголовки
    var title = $(this).attr('title');
    $(this).wrapAll('<div class="image" />');
    if (title !== undefined) {
            $(this).attr('title', '');
            $(this).after('<p>'+ title +'</p>');
    }
});

Теперь мы можем задавать разные параметры и код будет их учитывать.

6. Стили.

Теперь необходимо описать все используемые контейнеры в основном файле стилей — powerSlide.css, который располагается в папке css.

/* Основной контейнер  - Wrapper
-------------------------------------------*/
.powerSlide .wrapper {
    overflow: hidden;
    padding: 15px;
    position: relative;
}
 
/* Контейнер для изображения и заголовка - Image
-------------------------------------------*/
.powerSlide .wrapper img {
    position: absolute; /*Важно! Благодаря этому работает корректно эффекты. */
}
 
/* Кнопки навигация Пред. и След.
-------------------------------------------*/
.powerSlide a.prev,
.powerSlide a.next {
    display: none;
    margin-top: -1em; /* Same as padding-top */
    padding: 1em 2em;
    position: absolute;
    text-decoration: none;
    top: 50%;
}
.powerSlide a.next {
    right: 0;
}
 
/* Заголовок
-------------------------------------------*/
.powerSlide .wrapper p {
    bottom: 0;
    display: none;
    padding: 1.5em;
    position: absolute;
}
 
/* Панель навигации
-------------------------------------------*/
.powerSlide .nav {
    margin: .5em 0;
    overflow: hidden;
}
.powerSlide .nav.thumbs {
    padding: 15px; /* Отступы такие же как и основного контейнера - wrapper */
}
.powerSlide .nav img.thumb {
    cursor: pointer;
    float: left;
    margin: 2px;
    position: relative;
}
.powerSlide .nav img.thumb.current { /* Текущая иконка */
    z-index: 999;
}
.powerSlide .nav a {
    float:left;
    margin: .2em;
    min-width: 1em;
    padding: .2em .7em;
    text-align: center;
    text-decoration: none;
}
.powerSlide .nav a.current {} /* Текущий маркер */

7.  Так выглядит самый простой способ задания стиля для нашего слайдшоу. Но давай-те сделаем его немного красивее при помощи эффектов CSS3, а конкретнее при помощи градиентов.

В папке css создаём новый файл powerSlide_theme.css и добавляем на него ссылку в файле index.html

<link href="css/powerSlide_theme.css" rel="stylesheet" type="text/css" media="screen"/>

И вносим в него следующие стили

/* Основной контейнер - Wrapper
-------------------------------------------*/
.powerSlide .wrapper {
    background:#fff;
    border:1px solid #999;
}
 
/* Кнопки Пред. и След.
-------------------------------------------*/
.powerSlide a.prev,
.powerSlide a.next {
    background:#fff;
    box-shadow:2px 0 2px rgba(0,0,0,.3);
    color:#000;
    font:bold 10px Arial;
}
.powerSlide a.next {
    box-shadow:-2px 0 2px rgba(0,0,0,.3);
}
 
/* Заголовок
-------------------------------------------*/
.powerSlide .wrapper p {
    background:#000;
    background:rgba(0,0,0,.7);
    color:#fff;
}
 
/*Панель навигации
-------------------------------------------*/
.powerSlide .nav.thumbs {
    background:#b5bdc8;
    border:1px solid #999;
}
.powerSlide .nav img.thumb {
margin: 3px;
    box-shadow:0 0 2px #666;
    border: 4px solid transparent;
    filter:alpha(opacity=40);
    opacity:.4;
}
.powerSlide .nav a {
    background:#7d7e7d;
    /* Добавим градиент*/
    background:-moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
    background:-webkit-linear-gradient(top,#7d7e7d0%,#0e0e0e100%);
    background:-o-linear-gradient(top,#7d7e7d0%,#0e0e0e100%);
    background:-ms-linear-gradient(top,#7d7e7d0%,#0e0e0e100%);
    background:linear-gradient(top,#7d7e7d0%,#0e0e0e100%);
    border-radius:3px;
    color:#fff;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d',endColorstr='#0e0e0e',GradientType=0);
    font:bold 12px Arial;
}
.powerSlide .nav img.thumb.current {
    box-shadow:0 0 10px #fff;
    border: 4px solid #fff;
    filter:alpha(opacity=100);
    opacity:1;
}
.powerSlide .nav a.current {
    background:#1e5799;
    background:-moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
    background:-webkit-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);
    background:-o-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);
    background:-ms-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);
    background:linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1E5799',endColorstr='#7db9e8',GradientType=0);
}

8. Описание объектов и основных функций.

Ниже приведён список всех оновных параметров, которые мы бы хотели видеть в нашем плагине.

Открываем файл powerSlide.js в папке js и добавляем туда следующий код.

var Slider = function(){
 
this.imgs = wrapper.find('div.image');
this.imgCount = (this.imgs.length) - 1; // Проверяем индексы
this.navPrev = wrapper.find('a.prev');
this.navNext = wrapper.find('a.next');
this.bullets = container.find('.nav a');
this.thumbs = container.find('.nav img.thumb');
this.captions = this.imgs.find('p');
 
this.getCurrentIndex = function(){ // Индекс
    return this.imgs.filter('.current').index();
};
 
this.go = function(index){ // Повернуть изображение
    this.imgs
        .removeClass('current')
        .fadeOut(opt.fadeSpeed)
        .eq(index)
        .fadeIn(opt.fadeSpeed)
        .addClass('current');
    this.bullets
        .removeClass('current')
        .eq(index)
        .addClass('current');
    this.thumbs
        .removeClass('current')
        .eq(index)
        .addClass('current');
};
 
this.next = function(){
    var index = this.getCurrentIndex();
    if (index < this.imgCount) {
        this.go(index + 1); // Следующий
    } else {
        this.go(0); //Если последнее изображение, значит перейти на первое
    }
};
 
this.prev = function(){
    var index = this.getCurrentIndex();
    if (index > 0) {
        this.go(index - 1); // Предыдущий
    } else {
        this.go(this.imgCount); // Если первое изображение, значит перейти на последнее
    }
};  
 
this.init = function(){ // Инициализация
    wrapper
        .width(opt.width)
        .height(opt.height); /* Установить высоту и ширину */
 
    this.imgs.hide().first().addClass('current').show(); /*Установить текущий элемент */
    this.bullets.first().addClass('current');
    this.thumbs.first().addClass('current');
 
    // Определить размеры иконок и заголовков
    var padding = wrapper.css('padding-left').replace('px', '');
    var captionsPadding = this.captions.css('padding-left').replace('px', '');
    nav.width(opt.width);
    if (opt.thumbs === true) { // Иконки
        var thumbBorder = this.thumbs.css('border-left-width').replace('px', '');
        var thumbMargin = this.thumbs.css('margin-right').replace('px', '');
        var thumbMaxWidth = opt.width/opt.row;
        this.thumbs.width( (thumbMaxWidth - (thumbMargin * 2)) - (thumbBorder * 2) );
    }
    this.captions // заголовки
        .width(opt.width - (captionsPadding * 2) + 'px')
        .css('margin-bottom', padding + 'px');
    this.navNext.css('margin-right', padding + 'px');
    };
 
};

После того как были описаны основные объекты их необходимо загрузить при помощи функции инициализации

var slider = new Slider();
slider.init();

9. Добавим описание функций мышки. Нам необходимо выловить следующие события и обработать их:

Код будет выглядеть следующим образом:

wrapper.hover(function(){ // Курсор мышки находится над слайдшоу
    slider.captions.stop(true, true).fadeToggle();
    slider.navNext.stop(true, true).fadeToggle();
    slider.navPrev.stop(true, true).fadeToggle();
});
slider.navNext.click(function(e){ // Нажата кнопка След.
    e.preventDefault();
    slider.next();
});
slider.navPrev.click(function(e){ // Нажата кнопка Пред.
    e.preventDefault();
    slider.prev();
});
slider.bullets.click(function(e){  // Нажата цифра на панели навигации
    e.preventDefault(); slider.captions.hide();
    slider.go($(this).index());
});
slider.thumbs.click(function(){ // Нажат иконка
    slider.captions.hide();
    slider.go($(this).index());
});

10. Функция ротации изображений. Если ротация включена, заголовок необходимо сделать невидимым.

if (opt.auto === true) {
    var timer = function(){
            slider.next();
            slider.captions.hide();
    };
    var interval = setInterval(timer, opt.autoSpeed);
 
    //Если мышка находиться над изображением, то надо сделать паузу
    wrapper.hover(function(){clearInterval(interval);}, function(){interval=setInterval(timer, opt.autoSpeed);});
 
    // Обнулить таймер, если была нажата иконка или маркер
    slider.thumbs.click(function(){clearInterval(interval); interval=setInterval(timer, opt.autoSpeed);});
    slider.bullets.click(function(){clearInterval(interval); interval=setInterval(timer, opt.autoSpeed);});
}

Урок переведён с этого источника.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *