Добавить переменную анимацию скольжения в HTML, CSS, JavaScript Slideshow - PullRequest
Новая
       11

Добавить переменную анимацию скольжения в HTML, CSS, JavaScript Slideshow

0 голосов
/ 04 января 2019

Я создал слайд-шоу, выглядит нормально, но грубо.

Я использовал HTML, CSS и JavaScript.

Сначала я хочу добавить чередующуюся скользящую анимацию.

DEFINE: Чередующаяся анимация слайдов

Это означает, что если я перейду к предыдущему слайду, он перейдет справа налево, но если я перейду к следующему слайду, он будетпереход слева направо.

Я пытался получить помощь от Google, но ответы не имеют смысла.

Я покажу весь примерный код слайд-шоу:

Базовая структура HTML: 

<div id="slideShow">
     <div class="slideItem" style="background-image: url(img1.jpg);">
          <div>
               <h1>Item 1</h1>
               <p>Lorem ispum dorat... I don't know latin.</p>
          </div>
     </div>
     <div class="slideItem" style="background-image: url(img2.jpg);">
          <div>
               <h1>Item 2</h1>
               <p>Lorem ispum dorat... I don't know latin.</p>
          </div>
     </div>
     <div class="slideItem" style="background-image: url(img3.jpg);">
          <div>
               <h1>Item 3</h1>
               <p>Lorem ispum dorat... I don't know latin.</p>
          </div>
     </div>
     <img src="left.png" id="left" onclick="addIndex(false);" />
     <img src="right.png" id="right" onclick="addIndex(true);" />
</div>

div с id из slideShow - это просто контейнер для всех элементов.

Все div с внутриslideShow с id из slideItem - это элементы слайдов, которые вы видите.

Я также добавил div внутри каждого slideItem для контроля полей.

Я использовалотдельный style элемент для фоновых изображений, и я добавил немного текста в slideItem s.

Последние два img s - кнопки to переходить от слайда к слайду.Вот почему у них есть событие onclick.У них также есть id s left и right для внешних стилей CSS.

Стиль, CSS: 

* {
     margin: 0;
     word-wrap: break-word;
}

#slideShow div div, #slideShow div div * {
     margin: 8px;
}

#slideShow div {
     width: 100%;
     height: 15cm;
     background-size: cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale");
     -ms-filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale");
}

#slideShow div:not(:first-of-type) {
     display: none;
}

#slideShow #left, #slideShow #right {
     position: absolute;
     display: block;
     top: 50%;
     width: auto;
     margin-top: 1cm;
     padding: 5mm;
     transition: background-color 250ms;
     -webkit-transition: background-color 250ms;
     -moz-transition: background-color 250ms;
     -o-transition: background-color 250ms;
}

#slideShow #right {
     right: 0;
}

#slideShow #left:hover, #slideShow #right:hover {
     background-color: #000;
     cursor: pointer;
}

Во-первых, я использовал * для очисткиграницы всего, используя margin: 0 для некоторых целей, таких как прикрепление слайд-шоу к краю окна.

Затем я назначил margin: 8px содержимому div внутри каждого slideItem иdiv s внутри себя, чтобы вернуть поля к норме.

Я установил все slideItem s, чтобы сделать его полной ширины, достаточно большим, и изменил фоновое изображение так, чтобы оно было полноэкранным внутри slideItem.

Создание только первого слайд-шоу с использованием display: none.Я использовал :not(:first-of-type), чтобы все слайды использовали display: none, исключая первый слайд.

Для кнопок управления я использовал position: absolute, чтобы они не отображались внизу, а display: block для созданияони как кнопки.

Я использовал padding: 5mm, чтобы сделать их большими большими блоками.

Я использовал остальные, чтобы отрегулировать положение кнопки управления, и добавил transition для фонового изображения.

Правая кнопка использует right: 0, поэтому она выровнена по правому краю, а не по левому.

У них есть событие hover, которое становится черным, когда мышь находится на кнопках.Я также добавил код, чтобы изменить изображение курсора на то, что вы видите при наведении курсора мыши на ссылку a.

Наконец, JavaScript: 

var imageIndex = 0;
var totalSlides = 2;
var slides = document.getElementsByClassName("slideItem");

displayImage(imageIndex);

function addIndex(coo) {
    if(coo == true) {
         imageIndex++;
         displayImage(imageIndex);

         if(imageIndex > totalSlides) {
              imageIndex = 0;
              displayImage(imageIndex);
         }
    }
    else if(coo == false) {
         imageIndex--;
         displayImage(imageIndex);

         if(imageIndex < 0) {
              imageIndex = totalSlides;
              displayImage(imageIndex);
         }
    }
}

function displayImage(index) {
     if(index == 0) {
          slides[0].style.display = "block";
          slides[1].style.display = "none";
          slides[2].style.display = "none";
     }
     else if(index == 1) {
          slides[0].style.display = "none";
          slides[1].style.display = "block";
          slides[2].style.display = "none";
     }
     else if(index == 2) {
          slides[0].style.display = "none";
          slides[1].style.display = "none";
          slides[2].style.display = "block";
     }
}

imageIndex является счетчикомтекущего слайда.Его значение равно 0, и это означает, что 1.

totalSlides указывает общее количество слайдов.Значение равно 2, но это означает 3.

В начале я добавляю displayImage(imageIndex), чтобы показать первый слайд.(Я сделал это на CSS, и я знаю!)

Функция addIndex изменяет индекс (значение imageIndex) в зависимости от аргумента с именем coo, что означает проверку или противоположность.

Если coo равно true, тогда он добавит индекс, но если он false, индекс будет понижен.

Код включает в себя displayIndex(imageIndex), так что слайд изменяетсявместе с индексом.

Вы видели, как я упоминал displayIndex(imageIndex) много раз.

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

...