3

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

2
  • 6
    Добавьте в вопрос ваш код
    – Cheg
    17 июл 2017 в 13:51
  • Решение нужно на jQuery или на чистом JS?
    – Byulent
    17 июл 2017 в 14:46

1 ответ 1

4

Приблизительно такое решение на 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;
}
<div class="content">
  <ul>
    <li class="active"><a href="#">Первый элемент</a></li>
    <li><a href="#">Второй элемент</a></li>
    <li><a href="#">Третий элемент</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • Неплохо бы еще добавить предварительную загрузку изображений, чтобы при смене слайдов они уже были полностью загружены
    – Cheg
    17 июл 2017 в 15:52
  • @Cheg в здешнем фрейме для примеров у меня загружается только картинка при первоначальной загрузке, а при смене они уже отображаются сразу.
    – Byulent
    17 июл 2017 в 16:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.