• Главная
  • Карта сайта
Не найдено

Як створити простий і швидкий слайдер зображень на jQuery

  1. завдання
  2. створення слайдера
  3. Демо і викачати

Уже кілька разів мене просили розповісти, як зробити слайдер на JS, а я все не розповідав. Головна причина - тому що не знав, як.

У якийсь момент я зрозумів, що слайдер іноді простіше написати, ніж шукати готовий. Тому хочу запропонувати вам урок по створенню такого слайдера. Його легко зробити своїми руками, а код займає менше 2 Кб.

Робочий приклад можна побачити тут .

завдання

Створити слайдер зображень. Розміри ролі не грають, тільки зображення повинні бути однакового розміру. Перед підключенням скрипта не забудьте підключити jQuery:

<Script type = "text / javascript" src = "http://code.jquery.com/jquery-latest.min.js"> </ script>

створення слайдера

Для управління слайдером буде використовуватися меню з білими кружками, активна закладка буде зеленою. Меню створюється динамічно. Завдання вебмастера - створити список із зображень і привласнити правильні класи. На сторінці можна розташовувати будь-яку кількість слайдерів, роботі один одного вони не заважають.

Код слайдера буде таким:

<Div class = "slider"> <ul> <li> <img src = "i / 1.jpg" alt = ""> </ li> <li> <img src = "i / 2.jpg" alt = ""> </ li> <li> <img src = "i / 3.jpg" alt = ""> </ li> <li> <img src = "i / 4.jpg" alt = ""> < / li> <li> <img src = "i / 5.jpg" alt = ""> </ li> </ ul> </ div>

Для управління слайдером потрібен такий код:

<Script type = "text / javascript"> $ (document) .ready (function () {$ ( ". Slider"). Each (function () {// обробляємо кожен слайдер var obj = $ (this); $ ( obj) .append ( "<div class = 'nav'> </ div>"); $ (obj) .find ( "li"). each (function () {$ (obj) .find ( ". nav" ) .append ( "<span rel = '" + $ (this) .index () + "'> </ span>"); // додаємо блок навігації $ (this) .addClass ( "slider" + $ (this ) .index ());}); $ (obj) .find ( "span"). first (). addClass ( "on"); // робимо активним перший елемент меню});}); function sliderJS (obj, sl) {// slider function var ul = $ (sl) .find ( "ul"); // знаходимо блок var bl = $ (sl) .find ( "li.slider" + obj); // знаходимо будь-який з елементів блоку var step = $ (bl) .width (); // ширина об'єкта $ (ul) .animate ({marginLeft: "-" + step * obj}, 500); // 500 це швидкість перемотування} $ (document) .on ( "click", ".slider .nav span", function () {// slider click navigate var sl = $ (this) .closest ( ". Slider") ; // знаходимо, в якому блоці був клік $ (sl) .find ( "span"). removeClass ( "on"); // прибираємо активний елемент $ (this) .addClass ( "on"); // робимо активним поточний var obj = $ (this) .attr ( "rel"); // дізнаємося його номер sliderJS (obj, sl); // слайд return false;}); </ Script>

А стилі для слайдера потрібні такі:

<Style type = "text / css"> .slider {z-index: 9; width: 700px; height: 290px; overflow: hidden; margin: 0 0 7px; position: relative; } .Slider ul, .slider li {padding: 0; margin: 0; list-style-type: none; } .Slider ul {width: 9999px; } .Slider ul li {list-style-type: none; float: left; width: 700px; height: 290px; } .Slider .nav {position: absolute; left: 15px; bottom: 12px; } .Slider .nav span {opacity: 0.9; background: #fff; margin: 0 8px 0 0; width: 16px; height: 16px; border-radius: 8px; cursor: pointer; overflow: hidden; display: block; float: left; box-shadow: 0 1px 2px # 000; } .Slider .nav span.on {background: # 2e9419; } </ Style>

Як бачите, код гранично простий. Я спеціально не робив різні стилі переходів, а зупинився саме на простому перемотування слайдів. Крім того, автоматично слайди мінятися не будуть. Не знаю, кого як, але мене дратує будь-яка анімація на сторінці, яка проводиться без мого відома.

За замовчуванням розмір блоку 700 х 290 пікселів, його можна змінювати як завгодно. Не забудьте також оновити CSS після зміни розмірів картинок.

Демо і викачати

Потрібна версія з автоматичною прокруткою ?

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью