Слайдер картинок через массив

432
14 июня 2017, 03:57

Сделал слайдер через массив, но не могу придумать, как сделать 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);
    });
Answer 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);
});
READ ALSO
Верстка stackoverflow, flex заменяется на inline-block

Верстка stackoverflow, flex заменяется на inline-block

Заметила, что верстка stackoverflow выполнена с помощью flex'ов

254
Не видна карта google при открытии первоначально скрытого блока

Не видна карта google при открытии первоначально скрытого блока

Добрый день! В моём приложении несколько страниц (через блок div), Одна из страниц содержит карту google (js api, ключ есть)По логике работы приложения...

256