У меня есть слайдер с текстом. Там 6 элементов li. Мне нужно чтобы при активности первого элемента менялся фон блока всего, затем при активности второго менялся фон уже на другой и т.д
Ответ
Приблизительно такое решение на 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;
}
Комментариев нет:
Отправить комментарий