<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Карусель на чистом JS

Карусель на чистом JS

Делать карусель на чистом JS, с нуля и самому? Зачем изобретать велосипед, когда есть готовые решения, slick / owl слайдеры? На это есть, как минимум две причины:

  • в учебных целях
  • для выполнения тестовых заданий

При трудоустройстве, даже на вакансию HTML верстальщика, вас попросят, не просто сверстать карусель, но и привести её в действие на JS, без использования сторонних библиотек.

Пример карусели

Что делает JavaScript с элементами?

Меняет свойства у элементов, с помощью методов, при наступлении событий. Три кита, на которых держится JavaScript:

  • свойства
  • методы
  • события

Пользователь сам запускает событие onclick, при клике по кнопке. Задача программиста, повесить событие клика на нужный элемент и написать инструкции (функцию) для браузера, что должно произойти, при клике.

HTML разметка для карусели

Создадим контейнер для картинок, вставим сами картинки и две кнопки – Вперед / Назад.

<div id="gallery">
    <div class="photos">
        <img src="img/woman.jpg">
        <img src="img/pigs.jpg">
        <img src="img/animals.jpg">
    </div>
    <div class="buttons">
        <button class="prev">Назад</button>
        <button class="next">Вперед</button>
    </div>
</div>

CSS стили

#gallery{
    width: 640px;
    margin: 20px auto;
    text-align: center;
}

#gallery .photos img{
    width: 100%;
    display: none;
}

#gallery .photos img:first-child{
    display: block;
}

.buttons {
    margin-top: 20px;
}

Логика работы карусели

Как вообще писать JS код, когда не понимаешь логики, происходящего. При нажатии на кнопку Вперед, текущая картинка исчезает, а на её месте появляется новая. В области видимости, всегда одна картинка, а где тогда остальные? А остальные, мы спрятали, задали для всех картинок display: none, оставив только первую, задав ей display: block, через псевдокласс first-child.

Карусель на чистом JS.

Подготовительные работы закончились, дальше переходим к JS.

Как сделать так, чтобы при каждом клике по кнопке Вперед, первая картинка исчезала, а появлялась вторая, а вместо второй, третья. Необходимо, переключать свойство display, между none / block, при клике по кнопке.

JS код

Делаем выборку элементов

Получим кнопки Вперед / Назад по селектору, применив метод querySelector и положим их в переменные btn_prev / btn_next.

let btn_prev = document.querySelector('#gallery .buttons .prev');
let btn_next = document.querySelector('#gallery .buttons .next');

Получим все картинки по селектору, через метод querySelectopAll и так же поместим, их в переменную images.

querySelectopAll – получает массив элементов, то есть все картинки.

let images = document.querySelectorAll('#gallery .photos img');

В массиве, элементы хранятся, уже в пронумерованном виде, начиная с нуля. Поэтому, мы можем обращаться к ним по номеру. Но сначала, создадим новую переменную и поместим в неё, номер первой картинки, той, которая имеет свойство display: block.

let i = 0; // номер текущей картинки, на экране

Обращаемся к текущей картинке и меняем ей в стилях, свойство display.

images[i].style.display = 'none'; // прячем текущую картину

Сейчас, на экране нет ни одной картинки. Каким образом, там появится следующая картинка? Нам известно, что номер следующей картинки, всегда будет больше номера предыдущей, на единицу.

i++ ; // увеличиваем переменную i на единицу

images.length – это количество картинок, которое может меняться, поэтому не нужно указывать, что у нас 3 картинки, браузер и так это знает. Мы увеличиваем счетчик i, каждый раз на единицу, до тех пор, пока не покажется последняя картинка, а затем принудительно, заставляем карусель, возвращаться снова на первую картинку. Это называется – зацикливанием.

Прописываем условие, что когда счетчик i, станет больше, чем количество, имеющихся картинок, то произойдет возврат, к текущей картинки, под номером 0.

if(i >= images.length){
    i = 0; // переменная i равна 0
}

При листании картинок в обратном порядке, счетчик i, должен уменьшаться на единицу. Если значение переменной, станет меньше нуля, то в неё, надо положить номер последней картинки.

btn_prev.onclick = function(){
    images[i].style.display = 'none';
    i = i - 1;
    if(i < 0){
        i = images.length - 1;
    }
    images[i].style.display = 'block';
}

Вычитаем из общего количества images.length, единицу и получаем картинку под номером 2. Это и будет последняя картинка, так как исчисление в программировании, начинается с нуля.

Для прохождения теста, на позицию верстальщика, необходимо уверенное понимание JS, мой видеокурс по JavaScript., как раз ориентирован на верстальщиков.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.