Блог

Главная - Вопросы по программированию - Как я могу создать полноэкранное слайд-шоу с перекрестными переходами на фоне без белого мерцания?

Как я могу создать полноэкранное слайд-шоу с перекрестными переходами на фоне без белого мерцания?

#javascript #html #css

#javascript #HTML #css — код

Вопрос:

Я создаю полноэкранное слайд-шоу с перекрестным переходом на моей веб-странице с помощью HTML и CSS, однако оно работает плохо. Я мог бы создать перекрестное затенение на фоновых изображениях, но есть проблема. При первой загрузке между каждым изображением появляется белое мерцание. Я не хочу избегать белого мерцания. Как я могу их исправить?

Я написал с помощью HTML и CSS для создания слайд-шоу с перекрестными переходами.

 <body>
  <div class="slideshow">
  </div>
</body>
 
 body {
  margin: 0;
  padding: 0;
}

.slideshow {
  height: 100vh;
  weight: 100%;
  background-image: url('../images/1.jpg');
  background-size: cover;
  animation: slide 24s infinite;
}

@keyframes slide {
  25% {
    background-image: url('../images/2.jpg');
    background-size: cover;
  }

  50% {
    background-image: url('../images/3.jpg');
    background-size: cover;
  }

  75% {
    background-image: url('../images/4.jpg');
    background-size: cover;
  }
}

Мне не нужны белые блики, и я применяю красивое слайд-шоу с перекрестными переходами.

Ответ №1:

Мерцание происходит, вероятно, потому, что браузер рисует новое изображение.

Попробуйте создать отдельные <div> для каждого слайда, расположите их абсолютными и просто удалите каждый из них.

 <body>
    <div class="slideshow">
        <div class="slide slide-1"></div>
        <div class="slide slide-2"></div>
        <div class="slide slide-3"></div>
        <div class="slide slide-4"></div>
    </div>
</body>
 
 .slideshow {
  position: relative;
  width: 100vw; height: 100vh;
}

.slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; /* makes it full size */
  opacity: 0;
  transition: opacity 1s;

  background-size: cover;
  background-position: center;
}
.slide.active { 
  opacity: 1;
}

Только с помощью CSS:

 @keyframes slide-1 {
    0% , 40% , 100% { opacity: 0; }
    20%             { opacity: 1; }
}
@keyframes slide-2 {
    0% , 20% , 60% , 100% { opacity: 0; }
    40%                   { opacity: 1; }
}
@keyframes slide-3 {
    0% , 40% , 80% , 100% { opacity: 0; }
    60%                   { opacity: 1; }
}
@keyframes slide-4 {
    0% , 60% , 100%  { opacity: 0; }
    80%              { opacity: 1; }
}

.slide-1 { animation: slide-1 24s infinite; background-image: url('../images/1.jpg'); }
.slide-2 { animation: slide-2 24s infinite; background-image: url('../images/2.jpg'); }
.slide-3 { animation: slide-3 24s infinite; background-image: url('../images/3.jpg'); }
.slide-4 { animation: slide-4 24s infinite; background-image: url('../images/4.jpg'); }

Или с помощью JS:

 setInterval(function(){ 
    var current = document.querySelector('.slide.active');

    if (current.nextElementSibling) {
        current.nextElementSibling.classList.add('active');
    } else {
        current.parentElement.firstElementChild.classList.add('active');
    };

    current.classList.remove('active');
}, 6000);

Комментарии:

1. Спасибо за быстрый ответ!! Куда я должен поместить фоновые изображения, такие как свойство ‘background-image’?

2. Рад, что это помогло! Если этого достаточно, пожалуйста, отметьте это как принятый ответ для будущих читателей. Удачи!

3. Но там нет описания фонового изображения, пожалуйста, помогите мне!! Теперь я работаю с кодом js, который вы дали…

4. Вы помещаете изображение в div 🙂

5. Сейчас я использую единственную версию css, но, похоже, все изображения перекрываются… Как я могу это исправить?

Метки: