Ubah fungsi scrollTo untuk membuat gambar berikutnya/sebelumnya berada di tengah, bukan di kiri

Saya memiliki div yang bergulir secara horizontal yang berisi gambar.

Menggunakan beberapa jQuery, saya memilikinya sehingga mengklik bagian kanan div akan menggulir ke gambar berikutnya, dan setengah kiri menggulir ke gambar sebelumnya. Saat ini, setelah fungsi scrollTo, gambar berikutnya/sebelumnya muncul di sebelah kiri penampung.

Bagaimana cara mengubahnya agar berada di tengah wadah, dan juga mengubah fungsi currentElement untuk memeriksa kapan gambar berada di tengah.

$(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

Ini adalah Fiddle untuk digunakan di galeri.


javascript scroll html jquery
person Joe    schedule 13.01.2016    source sumber
comment
jsfiddle.net/3zLg4p8v/7 Saya telah membuat beberapa perubahan dan berfungsi dengan baik. Mungkin masih ada beberapa bug lagi yang perlu diperbaiki. Jadi tidak memposting sebagai jawaban.   -  person tkay    schedule 13.01.2016
comment
Terima kasih balasannya. Ya, scrollTo berfungsi dengan baik, membuatnya terpusat. Tampaknya hanya ada masalah dengan apa yang dianggap currentElement, jika Anda telah menggulir secara manual. Hanya dengan tombol berikutnya.   -  person Joe    schedule 14.01.2016

Jawaban (1)


arrow_upward
0
arrow_downward

Periksa // CHANGED komentar saya di 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
Terima kasih, ini berhasil dengan baik! Apakah ada cara untuk menambahkan .animate dengan mudah di sana sehingga gulungannya dianimasikan, alih-alih melompat ke gambar? - person Joe; 14.01.2016
comment
@Joe Ya, periksa ini: jsfiddle.net/3zLg4p8v/9 satu-satunya baris yang diperbarui, beri komentar '// DIPERBARUI'. :) - person Baro; 14.01.2016