Как в js сделать смену фона при активности элемента

#javascript #css #site

У меня есть слайдер с текстом. Там 6 элементов li. Мне нужно чтобы при активности
первого элемента менялся фон блока всего, затем при активности второго менялся фон
уже на другой и т.д 
    

Ответы

Ответ 1

Приблизительно такое решение на jQuery. Можете изменять его соответственно вашей вёрстке.

UPD: упростил решение, вместо функции используется массив.


var images = [
  'https://yandex.ru/images/today?size=1920x1080',
  'http://www.carscope.ru/piclib/1280/960/91699.jpeg',
  'https://ru9.anyfad.com/items/t1@a8c329ba-9f5c-40d1-92eb-b43b0d6edb37/Blyuda-iz-tykvy-recepty.jpg'
];

$('document').ready(function() {
  $('.content').css('background-image', 'url('+images[$('li.active').index()]+')');
});

$('.content li').click(function() {
  $('.content li').each(function() {$(this).removeClass('active');})
  $(this).addClass('active');
  $('.content').css('background-image', 'url('+images[$(this).index()]+')');
});
.active a {
  color: red;
}

.content {
  width: 500px;
  height: 500px;
}

  

    
Первый элемент
    
Второй элемент
    
Третий элемент