Изменение фонового изображения с помощью Javascript

Я пытался создать слайд-шоу на одной из веб-страниц, которые я создавал. Я создал div с уникальным именем класса, который предназначен для изменения фонового изображения с помощью JavaScript. До сих пор мне удавалось делать следующее:

  1. захватите div, где я хочу изменить фоновое изображение с помощью querySelector
  2. предпринята попытка изменить фоновое изображение указанного div с помощью JavaScript

Я отлаживал эту функцию используя DevTools, я все же не могу понять, почему изображение не изменится. Есть идеи, что здесь происходит? Я включил фрагменты кода ниже. Спасибо.

HTML

<div class="content-one-right">
  <div class="inner-content-one-right">
    <div class="slideshow-container">
      <a class="prev" onclick="transitionSlides(-1)">❮</a>
      <a class="next" onclick="transitionSlides(1)">❯</a>
    </div>
  </div>
</div>

CSS 

.content-one-right {
  grid-column: col-start 7 / span 6;
  height: 60vh;
}

.inner-content-one-right {
    height: 90%;
    width: 90%;
}

.slideshow-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('../images/home-slideshow/home1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.prev, .next {
    cursor: pointer;
    color: #FFF;
    font-weight: bold;
    font-size: 1em;
    border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

JavaScript 

var slideshowIndex = 0;

function transitionSlides(n) {

  var images = ["home1", "home2", "home3", "home4", "home5", "home6"];
  slideshowIndex += n;

  if(slideshowIndex < 0) {
    slideshowIndex = images.length-1;
  }
  else if (slideshowIndex >= images.length) {
    slideshowIndex = 0;
  }

  var getContainer = document.getElementsByClassName('slideshow-container')[0];
  var imageToChange = "url('../images/home-slideshow/" + images[slideshowIndex] + ".jpg')";

  getContainer.style.backgroundImage = imageToChange;

}
2 2
javascript css getelementsbyclassname

2 ответа:

Я думаю, что проблема заключается в том, как вы пытаетесь изменить фоновое изображение. Первый раз, когда вы устанавливаете его, вы устанавливаете его в таблице стилей. Вы используете свойство CSS там.

Позже вы попытаетесь изменить его, используя свойство .style элемента. Это не одно и то же. Из этой страницы:

Свойство style не является полезным для полного изучения стили, применяемые к элементу, так как он представляет только CSS декларации, установленные в атрибут встроенного стиля элемента, а не те которые исходят из правил стиля в других местах, таких как правила стиля в раздел, или внешние таблицы стилей.

Чтобы уточнить, попробуйте сделать это в консоли на этой самой странице: document.querySelectorAll('input[type="submit"]')[3].style

Это захватывает синюю кнопку в нижней части страницы, на которой написано "опубликовать свой ответ". Он довольно четко получил синий фон, который установлен в CSS. Но этот объект CSSDeclaration в консоли имеет только пустые значения. Это потому, что он только отражает встроенные стили , а не стили, применяемые с помощью CSS.

Весело, да? С этим знанием, я думаю, вы можете выбрать тот или иной способ, чтобы сделать ваше слайд-шоу так, как вы ожидаете. Хотя, наверное, проще всего вообще не использовать фоновое изображение. Я думаю, что обычно там есть тег img и использовать javascript для установки атрибута src.

3

Вы сталкиваетесь с той же проблемой, что и в этом посте . Есть хорошая информация, предоставленная там тоже есть. При запуске кода в JSFiddle он просто создает следующее исключение: transitionSlides is not defined. Удалите обработчик onclick и используйте вместо него addEventListener(). Было бы лучше использовать ID для ваших кнопок prev и next, но это будет работать:

HTML: 

<div class="content-one-right">
    <div class="inner-content-one-right">
        <div class="slideshow-container">
            <a class="prev">&#10094;</a>
            <a class="next">&#10095;</a>
        </div>
    </div>
</div>

JavaScript: 

var slideshowIndex = 0;

document.getElementsByClassName('prev')[0].addEventListener("click", function() {
    transitionSlides(-1);
}, false);
document.getElementsByClassName('next')[0].addEventListener("click", function() {
    transitionSlides(1);
}, false);

function transitionSlides(n) {

    var images = ["home1", "home2", "home3", "home4", "home5", "home6"];
    slideshowIndex += n;

    if(slideshowIndex < 0) {
        slideshowIndex = images.length-1;
    }
    else if (slideshowIndex >= images.length) {
        slideshowIndex = 0;
    }

    var getContainer = document.getElementsByClassName('slideshow-container')[0];
    var imageToChange = "url('../images/home-slideshow/" + images[slideshowIndex] + ".jpg')";

    getContainer.style.backgroundImage = imageToChange;

}
0