Как добавить переходы в слайд-шоу с использованием JavaScript?

Question

У меня есть следующий очень простой код Javasript, который изменяет изображение, отображаемое при изменении SRC. Функции nextpic() и prevpic() выполняются при нажатии двух кнопок в основном HTML-файле.

var pics = [ 
    "http://dp.topcovers4fb.com/wp-content/uploads/2015/12/Child-Tomboy-Display-Picture.jpg", 
    "http://assets.rollingstone.com/assets/images/gallery/420cddbf3f116072564ab58c05f4d5e9b31aa046.jpg", 
    "http://imgfave-chat-herokuapp-com.global.ssl.fastly.net/image_cache/1292725000558109.jpeg", 
    "http://ecx.images-amazon.com/images/I/41N1wi0htgL.jpg", 
    "http://readynutrition.com/wp-content/uploads/2016/01/goat.jpg", 
    "http://images5.fanpop.com/image/photos/31600000/Random-Stuff-3-random-31692057-500-500.jpg" 
] 

function init(){ 
    interval; 
} 

onload = init; 

var interval = setInterval(nextpic, 5000); 

var max_pics = pics.length - 1; 
var i = 1; 

function nextpic(pic){ 
    var pic = document.getElementById("picswap"); 

    pic.src = pics[i]; 
    if(i < max_pics){ 
     i++; 
    }else{ 
     i = 0; 
    } 
} 

function prevpic(pic) 
{ 
    var pic = document.getElementById("picswap"); 
    pic.src = pics[i]; 
    console.log(i) 
    if(i > 0){ 
     i--; 
    }else{ 
     i = max_pics; 
    } 

} 

Есть ли способ, которым я могу сделать простой переход к изображениям? Ответы на вопросы, которые были заданы до сих пор, не относятся к стилю моего кода. Я понимаю, что не может быть прямого обнаружения изменений src, но что может быть возможным решением?

Answer 1

Есть две части этого ответа:

Во-первых, визуализируя ползунок

Чтобы получить два пункта нарастающий, один над другим, вы должны иметь два элемента. Один для следующего изображения и один для предыдущего изображения.

Представьте, что это как куча трех карт.

На дне у вас есть карта с буквой А.

В середине у вас есть карта с буквой Б.

На вершине вы имеете карточку с буквой С.

• С
• Б

Теперь мы хотим взять карту C сверху и поместить ее на дно. Таким образом, мы выбираем ее, переместить его вниз кучу и поставить его под B и A.

• B
• A
• C

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

В случае, указанном выше, C является защитной картой (покрытие B). B - это крытая карточка (покрытая C). A была скрытой карточкой (мы не видим ее вообще, когда двигаем карты).

После того, как мы переместили карты, C стала скрытой карточкой (внизу колоды), A стала закрытой карточкой (покрыта B), а B стала защитной картой.

Подобным образом слайды вашего слайдера будут покрывать и раскрывать друг друга.

Когда ваш пользователь нажимает «СЛЕДУЮЩИЙ», вам нужно будет загрузить изображение в «покрытый» слайд и медленно вытереть «покровный» слайд. Когда этот «покрывающий» слайд исчезает, вы можете переместить его в скрытое. Затем вы можете переместить «покрытый» слайд на «покрытие», а следующий - в кучу до «покрытого».

Ваш слайд-свая будет выглядеть следующим образом:

• покрытие
• покрыты
• скрытые

В самом деле, вы можете дать эти классы для ваших слайдов и применять CSS, который изменяет z-index ваших слайдов.

Во-вторых, переходы:

Чтобы изменить непрозрачность покрывающей слайде, я рекомендую вам применять классы элементов и использовать CSS, чтобы изменить непрозрачность от 1 до 0, используя a css transition. Как только новый класс будет применен, начнется переход, обеспечивающий плавный переход от одного к другому.