📑 Слайдер

Веб-сторінки переглядати цікавіше, коли вони реагують на дії користувача. як наприклад  подане нижче зображення.

 Для перегляду - клацайте на картинці.

Для програмування такої взаємодії використовується мова програмування JavaScript та її різновид JQuery. 

Для початку потрібно створити зображення, у якому будуть "склеєні" усі кадри, котрі потрібно показати. У даному випадку - це слайди презентації, скопійовані у графічний редактор. У результаті отримуємо файл, достатньо довгий по горизонталі, а по вертикалі - такого розміру, який ми би хотіли бачити його на сторінці.

Далі залишається скористатись наведеним нижче кодом:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

$(document).ready(function(){

var clip = 1;

$("#slider").click(function(){  

   if (clip < 9){

      $("#slider").animate({left:"-=480px"},500);

         clip+=1;

         }

   else{

      $("#slider").animate({left:"0px"},500);

         clip = 1;

         }

   });

});

</script>

<div id="pic_box" style="position:relative; left:50px; width:480px; overflow: hidden;">

<img id="slider" src="" style="position:relative; max-width: none; height: 360px;"> </div>

Розглянемо виділені змінні у цьому коді. Саме їх необхідно змінити для того, щоб налаштувати показ власного зображення.

9 - це кількість кадрів зображення. Спочатку ми перебуваємо на першому кадрі, і коли доходимо до дев'ятого, знову повертаємось до першого.

480px -ширина одного кадру зображення у пікселях

- адреса зображення

360px - висота зображення

Розберемо код докладніше.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

Перший рядок передбачає підключення бібліотеки мови JQuery. Вона може зберігатись як у файлі на власному комп'ютері чи хостингу, так і використовуватись із хмарного сервісу Google, як у наведеному прикладі.

Далі починається безпосередньо скрипт. Він запуститься на виконання після завершення завантаження документа, на що вказує рядок $(document).ready(function().

Оголошена змінна clip зберігає номер кадру, котрий показано у певний момент часу. На початку - це перший кадр.

Далі слідує обробник події клацання по об'єкту із назвою slider (далі у коді можна побачити, що так буде названо зображення) - $("#slider").click(function()

Конструкція умови перевіряє значення змінної clip. Якщо це значення менше 9, то до об'єкту slider (тобто зображення) застосовується функція анімації $("#slider").animate ліворуч на 480 пікселів зі швидкістю 500 (мілісекунд), як зазначено у параметрах цієї функції {left:"-=480px"},500. Також при цьому відбувається зміна номеру поточного кадру, збільшуючись на одиницю.

Якщо ж номер кадру рівний 9, то відбувається перехід на перший кадр. Для цього задано анімований перехід до координати 0 пікселів, а номер кадру стає рівним одиниці.

На цьому функція обробки документа і весь скрипт завершуються (відповідні фігурні дужки).

Решта коду стосується змістового та стильового наповнення документа.

Спочатку створюється рамка, у якій буде показане зображення. Це фрагмент div з назвою pic_box, із наступними властивостями стилю:

position:relative; - відносне розташування (від початкового - по краю сторінки, це уможливлює подальше зміщення блоку із зображенням)

left:50px; - зміщення на 50 пікселів від краю сторінки

width:480px; - ширина 480 пікселів

overflow: hidden; - якщо вміст виходитиме за межі блоку, його слід приховувати.

До тегу вставки зображення з ідентифікатором slider додано такий стиль:

position:relative; - відносне розташування (від початкового - по краю блоку, це уможливлює подальше зміщення зображення)

max-width: none; - незмінна ширина зображення

height: 360px; - задана висота зображення

Останні два параметри потрібні для тих веб-служб, котрі намагаються змінити початкові розміри зображення, припасовуючи їх до розмірів сторінки.