Измените функцию scrollTo, чтобы следующее/предыдущее изображение располагалось в центре, а не слева.

У меня есть div с горизонтальной прокруткой, содержащий изображения.

Используя некоторый jQuery, я сделал так, что при нажатии на правую половину div прокручивается к следующему изображению, а левая половина прокручивается к предыдущему изображению. В настоящее время после функции scrollTo следующее/предыдущее изображение находится слева от контейнера.

Как мне изменить его, чтобы он находился в центре контейнера, а также изменить функцию currentElement, чтобы проверить, когда изображение центрировано.

$(document).ready(function(){
var container = $("#sg-scroll"),
    child = $(".sg-pic_wrap"),
    current;

    // CURRENT ELEMENT CHECK
function currentElem () {
    child.each(function(){

        var x = $(this).offset().left,
            w = $(this).width();

        if (x <= 0 && x < w ) {
            current = $(this);
        }
    })
}

// MOVE TO ELEM
function scrollTo (elem) {
    container.scrollLeft(elem);
}


// CLICK
container.on("click", function(e){
    var _w = $(window).width();
    if ((e.pageX) <= (_w/2)) { // LEFT
        currentElem();
            if (current.prev().length > 0) { // otherwise we get undefined error
                scrollTo( parseInt((container.scrollLeft()) + (current.prev().offset().left) + 5 ) );
            }
    }
    else { // RIGHT
            currentElem();
            scrollTo( parseInt((container.scrollLeft()) + (current.next().offset().left) + 5 ) );
    }
});


// CURSOR ...
container.on("mousemove", function(e){
    var _w = $(window).width();
    if ((e.pageX) <= (_w/2)) { // LEFT
    }
    else { // RIGHT
    }
});

});//document.ready

Вот скрипт для его использования в галерее.


javascript scroll html jquery
person Joe    schedule 13.01.2016    source источник
comment
jsfiddle.net/3zLg4p8v/7 Я внес некоторые изменения, и все работает нормально. Возможно, есть еще какие-то ошибки, которые нужно исправить. Так что не публикуйте как ответ.   -  person tkay    schedule 13.01.2016
comment
Спасибо за ответ. Да, scrollTo работает нормально, он центрируется. Кажется, проблема только в том, что он считает currentElement, если вы прокручивали вручную. Правда, только с помощью следующей кнопки.   -  person Joe    schedule 14.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

Проверьте мои // CHANGED комментарии в JSFiddle.

$(document).ready(function() {
    // cache here reusable elements
    var container = $("#sg-scroll"),
        child = $(".sg-pic_wrap"),
        current;

    // CURRENT ELEMENT CHECK
    function currentElem() {
        // .each() instead of for(i = 0; i < var;i++)
        child.each(function() {

            // these variables must  be updated each time
            // we launch the function, so we cache them inside
            var x = $(this).offset().left,
                w = $(this).width(),
                cW = $('#sg-container').width() / 2; // CHANGED

            if (x < cW && x + w > cW) { // CHANGED
                current = $(this);
            }



        })
    }

    // MOVE TO ELEM
    function scrollTo(elem, width) {
        elem = elem + (width/2) - ($('#sg-container').width()/2); // CHANGED
        container.scrollLeft(elem);
    }


    // CLICK
    container.on("click", function(e) {
        var _w = $(window).width();
        if ((e.pageX) <= (_w / 2)) { // LEFT
            // we only need to check the current element each time we click, not on scroll
            // doing this will result in faster js
            currentElem();
            if (current.prev().length > 0) { // otherwise we get undefined error
                //scrollTo( parseInt((container.scrollLeft()) + (current.prev().offset().left) + 5) );
                scrollTo(container.scrollLeft() + current.prev().position().left, current.prev().width()); // CHANGED
            }
        } else { // RIGHT
            currentElem();
            //scrollTo( parseInt((container.scrollLeft()) + (current.next().offset().left) + 5 ) );
            scrollTo(container.scrollLeft() + current.next().position().left, current.next().width()); // CHANGED
        }
    });


    // CURSOR ...
    container.on("mousemove", function(e) {
        var _w = $(window).width();
        if ((e.pageX) <= (_w / 2)) { // LEFT
            //change cursor here
        } else { // RIGHT
            // or here
        }
    });



}); //document.ready
person Baro    schedule 13.01.2016
comment
Спасибо, это отлично работает! Есть ли способ легко добавить туда .animate, чтобы прокрутка анимировалась, а не прыгала на изображение? - person Joe; 14.01.2016
comment
@Joe Да, проверьте это: jsfiddle.net/3zLg4p8v/9 единственная обновленная строка имеет комментарий '// ОБНОВЛЕНО'. :) - person Baro; 14.01.2016