Як створити простий і швидкий слайдер зображень на jQuery
Уже кілька разів мене просили розповісти, як зробити слайдер на 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 після зміни розмірів картинок.
Демо і викачати
Потрібна версія з автоматичною прокруткою ?
