@Frostik12

При hover менять картинки?

Добрый день, подскажите пожалуйста как реализовать плавность смены картинок.

60881eac39343533122778.png

При наведении на карточки, справа меняются картинки.
Сейчас реализовано вот так
<ul class="vacancion__list">
                            <li data-img="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT5XnMTrmQRz5MX-jfUsvdkPyTltF-h-ZJaZ25onztpmhXOlYog" class="vacancion__item">
                                <p class="vacancion__item-title">Грузчик</p>
                                <p class="vacancion__item-price">30 000</p>
                                <span class="vanacion__item-number">01</span>
                            </li>
</ul>
</div>
                    <div class="vacancion__right">
                        <img src="img/vacancion/vacancion1.png" alt="" class="vacancion__img">
                      
                </div>


var liElems = document.querySelectorAll(".vacancion__item"),
  output = document.querySelector('.vacancion__img');

for (var i = 0; i < liElems.length; i++) {
  liElems[i].addEventListener("mouseenter", function(e) {
    output.src = this.dataset.img;
  });
}


Пример на CodePen https://codepen.io/Dmoooo/pen/MWJRare
  • Вопрос задан
  • 165 просмотров
Решения вопроса 1
Алгоритм:
  1. Добавляем под текущую картинку новую elem.prepend(....)
  2. У картинок свойство "transition: 1s"
  3. Добавляем текущей картинке класс со свойством "opacity: 0" (она постепенно скрывается и если нужно, потом удаляем сам элемент из DOM)
  4. Обновляет картинку, которая будет "текущей" по наличию класса


Идея с подстановкой "src" из атрибута "data-img" не очень хорошая. Если пользователь через мобильный зашел на сайт и скорость подключения маленькая или телефон не очень шустрый, картинки будут подгружаться с задержкой. Кажется, лучше их сразу все загрузить и просто скрывать все, а у нужной "opacity" выставлять на "1". Ну или в спрайт. Зависит от количества и качества.

Результат:
https://codepen.io/hisbvdis/pen/rNjbxbQ
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы