Question

我的滑块有问题，使它看起来有点尴尬而且不是很光滑。我正在使用最新的jQuery和jQueryUI。

这是我的滑块：

如果你在食物移动时仔细观察它们（特别是在过渡到中心图像的过程中），你可以看到它们在适当大小的情况下垂直“收缩”一小段时间。

我想我的问题是：有没有人知道如何让过渡更顺畅，所以你没有注意到任何急躁情绪？

这是代码，JavaScript首先：

<script>

    String.prototype.insert = function (index, string) {
        if (index > 0) {
            return this.substring(0, index) + string + this.substring(index, this.length);
        } else {
            return string + this;
        }
    };

    function activateImage(i) {
        var oldSrc = $('.pos' + i).attr('src');
        var positionOfPNG = oldSrc.indexOf(".png");
        var newSrc = oldSrc.insert(positionOfPNG, "-active");
        $('.pos' + i).attr('src', newSrc);
    };

    function deactivateImage(i) {
        var oldSrc = $('.pos' + i).attr('src');
        var newSrc = oldSrc.replace('-active','');
        $('.pos' + i).attr('src', newSrc);
    };

    function moveImageRightOne(i) {
        if ( i == 5 ) {
            $('.pos5').switchClass('pos5', 'pos1', 400, "swing");
        } else {
            $('.pos' + i).switchClass('pos' + i, 'pos' + (i + 1), 400, "swing");
        }

        if ( i == 2 ) {
            activateImage(i);
        }

        if ( i == 3 ) {
            deactivateImage(i);
        }
    };

    function moveImageLeftOne(i) {
        if ( i == 1 ) {
            $('.pos1').switchClass('pos1', 'pos5', 400, "swing");
        } else {
            $('.pos' + i).switchClass('pos' + i, 'pos' + (i - 1), 400, "swing");
        }

        if ( i == 4 ) {
            activateImage(i);
        }

        if ( i == 3 ) {
            deactivateImage(i);
        }
    };

    function slideRight() {
        var sliderLength = $('#foodCarousel img').length;
        for (var i = 1; i < sliderLength + 1; i++) {
            moveImageRightOne(i);
        }
    };

    function slideLeft() {
        var sliderLength = $('#foodCarousel img').length;
        for (var i = 1; i < sliderLength + 1; i++ ) {
            moveImageLeftOne(i);
        }
    };

</script>

CSS：

<style>

    #foodCarousel {
        width: 970px;
        height: 160px;
        position: relative;
        border: 1px solid #000;
    }

    #foodCarousel img {
        position: absolute;
    }

    .pos1 {
        z-index: 5;
        top:15px;
        left: 50px;
        max-height: 75px;
        max-width: 75px;
    }

    .pos2 {
        z-index: 10;
        top:50px;
        left: 200px;
        max-height: 125px;
        max-width: 125px;
    }

    .pos3 {
        z-index: 99999;
        top:25px;
        left: 400px;
        max-height: 150px;
        max-width: 150px;
    }

    .pos4 {
        z-index: 10;
        top: 35px;
        left: 650px;
        max-height: 125px;
        max-width: 125px;
    }

    .pos5 {
        z-index: 5;
        top:15px;
        left: 850px;
        max-height: 75px;
        max-width: 75px;
    }


</style>

HTML：

<div id="foodCarousel">
    <img class="pos1" src="/img/food7.png" alt="Corn">
    <img class="pos2" src="/img/food18.png" alt="Sesame Seed">
    <img class="pos3" src="/img/food11.png" alt="Meat">
    <img class="pos4" src="/img/food4.png" alt="Apple">
    <img class="pos5" src="/img/food3.png" alt="Blueberry">
</div>

<button style="margin-left:300px;" onclick="slideLeft()"><-- left</button>
<button onclick="slideRight()">right --></button>

Answer 1

基本上，由于全尺寸图像的大小不同，看起来这种行为正在发生。

我注意到，通过滚动，葡萄上没有发生混蛋，所以我在最大的元素上设置了一个最小宽度和高度等于那个尺寸。似乎可以做到这一点。

#foodCarousel img.pos3 {
    min-width:150px;
    min-height:111px;
}

平滑jQueryUI switchClass（）转换（目前生涩）

1 个答案: