Question

我做了一个 carousel 。在其中使用了scrollLeft()。你可以在CODEOPEN LINK

上看到它

  // For show/hide arrows button.
        carousel.scroll(function() {
            var i = carousel.scrollLeft();
            var w = carousel.width();
            console.log(i+'='+w);

            if (i == w) {
                next.fadeOut(400);
            } else {
                next.fadeIn(400);
            };
            if (i == 0) {
                prev.fadeOut(400);
            } else {
                prev.fadeIn(400);
            };
        });

我的问题是当页面处于全宽（1200px）时它可以正常工作但是当我调整浏览器大小时，scrollLeft()会返回不同的值。您可以在 console.log 中看到值。

我希望scrollLeft()到达结尾时下一个按钮会被隐藏。但是当宽度小于 1200px 时，它没有所需的行为。

Answer 1

您的代码存在一些问题。它显示swipeleft和swiperight等函数未定义，因为您可以在您的codepen控制台中看到它。而另一件事是，你第一次没有隐藏前一个元素。在加载时，您的幻灯片始终位于0位置，因此无需始终保持它，并且休息时间正常。你可以在这里看到我的小提琴你的例子：https://jsfiddle.net/or8pege7/2/和正确的代码。

var slide = $("#slide");
        var carousel = $("#wrapper-slide");
        var next = $("#next-btn-carousel");
        var prev = $("#prev-btn-carousel");

    // For show/hide arrows button.
        carousel.scroll(function() {
            var i = carousel.scrollLeft();
            var w = carousel.width();
            /*console.log(w);
            console.log(i);*/
            if (i == w) {
                next.fadeOut(400);
            } else {
                next.fadeIn(400);
            };
            if (i == 0) {
                prev.fadeOut(400);
            } else {
                prev.fadeIn(400);
            };
        });

    //For action next.
        function goNext() {
            var i = carousel.scrollLeft();
            var w = carousel.width();
            console.log(i+'='+w);
            carousel.animate({
                scrollLeft: (i += w)
            }, 1000, "swing");
        };
        if(carousel.scrollLeft()==0){
            $('#prev-btn-carousel').hide();
        }

        next.click(function() {
            goNext();
        });

        /*carousel.swipeleft(function(){
            goNext();
        });*/

    //For action prev.
        function goPrev() {
            var i = carousel.scrollLeft();
            var w = carousel.width();
            console.log(i+'='+w);
            carousel.animate({
                scrollLeft: (i -= w)
            }, 800, "swing");
        };

        prev.click(function() {
            goPrev();
        });

        /*carousel.swiperight(function(){
            goPrev();
        });*/


        carousel.on("dragstart", function(e) {
            e.preventDefault();
        });

水平滚动旋转木马

1 个答案: