Есть ли лучший способ реализовать эту галерею прокрутки, чтобы она не ломалась при многократном нажатии на стрелку - PullRequest
Новая
       6

Есть ли лучший способ реализовать эту галерею прокрутки, чтобы она не ломалась при многократном нажатии на стрелку

0 голосов
/ 13 марта 2020

Я создал галерею прокрутки, которая работает как задумано, но когда вы несколько раз быстро нажимаете стрелку, она ломается. Он восстановится, когда вы остановитесь, но я бы хотел, чтобы он был более плавным при быстром нажатии. 

const options = {
    slideOptionsRight: {
        "duration": 1000, //Change how quickly the picture fades in milliseconds.
        "direction": "right"
    },
    slideOptionsLeft: {
        "duration": 1000,
        "direction": "left"
    },
    images: [ //Add image names to be added to the scroll here, wrapped in quotation marks.
        '#image1',
        '#image2',
        "#image3",
        "#image6"
    ],
    arrowImage: [ //Add arrow images here.
        "#image4", //Left arrow.
        "#image5" //Right arrow.
    ],
    "interval": 3, //Change time between pictures in seconds.
    "imageArray": 0,
    "timer": 0,
    "leftClick": false,
    "clicked": false
}

//Does not need to be touched or changed
$w.onReady(function () {
    for (let i = 1; i < options.images.length; i++) {
        $w(options.images[i]).hide()
    }

    const changePicture = () => {
        options.timer += 1;
        if (options.timer > options.interval || options.clicked) {
            if (options.leftClick) {
                if (options.imageArray === 0) {
                    options.images.forEach((e) => {
                        $w(e).hide("slide", options.slideOptionsRight)
                    })
                    // $w(options.images[0]).hide("slide", options.slideOptionsRight);
                    $w(options.images[options.images.length - 1]).show("slide", options.slideOptionsLeft);
                    options.imageArray = options.images.length - 1;
                } else {
                    options.images.forEach((e) => {
                        $w(e).hide("slide", options.slideOptionsRight)
                    })
                    // $w(options.images[options.imageArray]).hide("slide", options.slideOptionsRight);
                    $w(options.images[options.imageArray - 1]).show("slide", options.slideOptionsLeft);
                    options.imageArray -= 1;
                }
                options.leftClick = false;
            } else {
                if (options.imageArray === options.images.length - 1) {
                    options.images.forEach((e) => {
                        $w(e).hide("slide", options.slideOptionsLeft)
                    })
                    // $w(options.images[options.imageArray]).hide("slide", options.slideOptionsLeft);
                    $w(options.images[0]).show("slide", options.slideOptionsRight);
                    options.imageArray = 0;
                } else {
                    options.images.forEach((e) => {
                        $w(e).hide("slide", options.slideOptionsLeft)
                    })
                    // $w(options.images[options.imageArray]).hide("slide", options.slideOptionsLeft);
                    $w(options.images[options.imageArray + 1]).show("slide", options.slideOptionsRight);
                    options.imageArray += 1;
                }
            }
            options.timer = 0
        } else {
            return null;
        }
    }

    let startInterval = setInterval(changePicture, 1000)

    $w(options.arrowImage[1]).onClick(() => {
        options.clicked = true;
        changePicture();
        options.clicked = false;
    })

    $w(options.arrowImage[0]).onClick(() => {
        options.leftClick = true;
        options.clicked = true;
        changePicture();
        options.leftClick = false;
        options.clicked = false;
    })
});

Есть ли способ заставить эффект слайда завершиться раньше, или лучше будет выполнить другую реализацию? ?

ссылка на тест https://joshsetterstrom.wixsite.com/mysite

...