<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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):

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