更改scrollTo功能以使下一个/上一个图像位于中心而不是左侧

Change scrollTo function to make next/prev image come to center instead of the left

本文关键字：于中心 图像 上一个 功能 scrollTo 下一个 更改      更新时间：2023-09-26

我有一个水平滚动的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

这是在画廊中使用的小提琴。

在 JSFiddle 中查看我的// CHANGED注释。

$(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
相关文章：