Сделал слайдер через массив, но не могу придумать, как сделать 2 элемент массива background-position-y: -110px
Вот сам скрипт
$(function() {
var imgHead = [
'images/slide1.jpg',
'images/slide2.jpg',
'images/slide3.jpg',
],
i=1;
function csaHead(){
if(i > (imgHead.length-1)){
$('.csa-head').animate({'opacity':'0'},200,function(){
i=1;
$('.csa-head').css({'background':'url('+imgHead[0]+')'+'no-repeat center bottom' });
$('.csa-head').css({'background-attachment': 'fixed'});
});
$('.csa-head').animate({'opacity':'1'},200);
}else{
$('.csa-head').animate({'opacity':'0'},200,function(){
$('.csa-head').css({'background':'url('+imgHead[i]+')'+'no-repeat center bottom'});
$('.csa-head').css({'background-attachment': 'fixed'});
i++;
});
$('.csa-head').animate({'opacity':'1'},300);
}
}
var intervalCsaHead = setInterval(csaHead,8000);
});
Если i===2
тогда задаём нужный стиль. Но лучше подогнать размер картинки чем делать позиционирование.
После рефакторинга и добавления условия:
$(function() {
var imgHead = [
'images/slide1.jpg',
'images/slide2.jpg',
'images/slide3.jpg',
],
i = 0;
function csaHead() {
i > (imgHead.length - 1) ? i = 0 : null;
$('.csa-head').animate({ 'opacity': '0' }, 200, function() {
console.log("ar: " + i);
$('.csa-head').css({ 'background': 'url(' + imgHead[i] + ')' + 'no-repeat center bottom' });
$('.csa-head').css({ 'background-attachment': 'fixed' });
i === 2 ? $('.csa-head').css({ 'background-position-y': '-110px' }) :
$('.csa-head').css({ 'background-position-y': '0px' });
i++;
});
$('.csa-head').animate({ 'opacity': '1' }, 300);
}
var intervalCsaHead = setInterval(csaHead, 1000);
});
Виртуальный выделенный сервер (VDS) становится отличным выбором
Заметила, что верстка stackoverflow выполнена с помощью flex'ов
Добрый день! В моём приложении несколько страниц (через блок div), Одна из страниц содержит карту google (js api, ключ есть)По логике работы приложения...