Исчезание фонового изображения с использованием JavaScript на переключателе изображений

1

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

<div class="my-images">
   <div id="image-1"></div>
   <div id="image-2"></div>
</div>


<script>
  function displayNextImage() {
     x = (x === images.length - 1) ? 0 : x + 1;
     document.getElementById("image-1").style.backgroundImage = images[x];
     document.getElementById("image-2").style.backgroundImage = images[x];
  }

  function startTimer() {
     setInterval(displayNextImage, 10000);
  }

  var images = [],
  x = 0;
  images[0] = "url('images/snow.jpeg')";
  images[1] = "url('images/nike.jpeg')";
  images[2] = "url('images/motor.jpeg')";
</script>

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

Теги:

2 ответа

1
Лучший ответ

Без JQuery у вас будет проблема совместимости между браузерами. Поэтому я предлагаю вам использовать JQuery для достижения этого.

<div class="my-images">
   <div class="my-image" id="image-1"></div>
   <div class="my-image" id="image-2"></div>
</div>


<script>
  function displayNextImage() {
    $("#image-" + x).css('backgroundImage',  images[x]).show('slow');
    x++;
  }

  var images = [],
  x = 0;
  images[0] = "url('images/snow.jpeg')";
  images[1] = "url('images/nike.jpeg')";
  images[2] = "url('images/motor.jpeg')";
</script>

И вы должны добавить это в css:

.my-image{
  display:none;
}

Если вы не используете display: block to you element: ваш CSS будет:

.my-image{
  display:whatYouWant;
}

Затем нужно добавить функцию ready() документа и сменить show() на fadeIn():

$(document).ready(function(){
    $(".my-image").hide();
  });

  function displayNextImage() {
    $("#image-" + x).css('backgroundImage',  images[x]).fadeIn('slow');
    x++;
  }

Это будет работать, потому что fadeIn() установлен для отображения предыдущего значения.

Если вы хотите видеть div до добавления изображения, удалите вызов $(document).ready() и отредактируйте displayNextImage():

function displayNextImage() {
  $("#image-" + x).hide().css('backgroundImage',  images[x]).fadeIn('slow');
  x++;
}
Поделиться
  • 0
    Я понимаю, что вы сделали, но при загрузке он исчезает, а затем снова появляется после таймера с новым изображением. Я не хочу, чтобы div исчезали при загрузке.
  • 0
    проверить отредактированный ответ
Показать ещё 3 комментария
0

Вы можете сделать это с помощью CSS-анимации для каждого цикла:

1) замените источники изображений, как вы уже делаете

2) сбросить затухание в анимации, подробнее здесь

3) увеличивайте свой индекс

const imgs = [
  'https://source.unsplash.com/iMdsjoiftZo/100x100',
  'https://source.unsplash.com/ifhgv-c6QiY/100x100',
  'https://source.unsplash.com/w5e288LU8SU/100x100'
];

let index = 0;

const oldImage1 = document.getElementById('oldImage1');
const newImage1 = document.getElementById('newImage1');
const oldImage2 = document.getElementById('oldImage2');
const newImage2 = document.getElementById('newImage2');

window.setInterval(() => {
  // put new image in old image
  oldImage1.src = newImage1.src;
  oldImage2.src = newImage2.src;
  
  // Set new image
  newImage1.src = imgs[index];
  newImage2.src = imgs[index];
  
  // reset animation
  newImage1.style.animation = 'none';
  newImage1.offsetHeight; /* trigger reflow */
  newImage1.style.animation = null; 
  newImage2.style.animation = 'none';
  newImage2.offsetHeight; /* trigger reflow */
  newImage2.style.animation = null; 
  
  // increment x
  index = index + 1 >= imgs.length ? 0 : index + 1;
}, 1500);
.parent {
  position: relative;
  top: 0;
  left: 0;
  float: left;
}

.oldImage1 {
  position: relative;
  top: 0;
  left: 0;
}

.newImage1 {
  position: absolute;
  top: 0;
  left: 0;
}

.oldImage2 {
  position: relative;
  top: 0;
  left: 100;
}

.newImage2 {
  position: absolute;
  top: 0;
  left: 100;
}

.fade-in {
  animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
<div class="parent">
  <img id="oldImage1" class="oldImage1" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
  <img id="newImage1" class="newImage1 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>
<div class="parent">
  <img id="oldImage2" class="oldImage2" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
  <img id="newImage2" class="newImage2 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню