0

Сделал слайдер через массив, но не могу придумать, как сделать 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);
    });
9
  • Что значит как сделать 2 индекс массива ? 13 июн 2017 в 7:21
  • ну 3 картинку в массиве это "images/slide3.jpg"
    – m3xTa1nes
    13 июн 2017 в 7:24
  • Те хотел сказать элемент массива
    – m3xTa1nes
    13 июн 2017 в 7:24
  • дайте пож. пример как вы хотите что бы у вас это выглядело? 13 июн 2017 в 7:25
  • @RazmikGalstyan , у меня есть слайдер , который меняет картинку в зависимости от элемента массива , но мне нужно чтобы 2 элемент (images/slide3.jpg) массива был со стилем "background-position-y: -110px" , но не могу это реализовать
    – m3xTa1nes
    13 июн 2017 в 7:30

1 ответ 1

1

Если 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);
});

Ваш ответ

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

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