0

我的滑块有问题，使它看起来有些尴尬且不太流畅。我正在使用最新的 jQuery 和 jQueryUI。

这是我的滑块：

http://samstil.es/slider.html

如果您在食物四处移动时仔细观察食物（特别是在从中心图像转换到和从中心图像转换时），您会发现它们垂直“收缩”了一秒钟，并以适当的大小静止。

我想我的问题是：有谁知道我怎样才能使过渡更顺畅，所以你不会注意到任何抖动？

这是代码，首先是 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>
4

1 回答 1

0

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

我通过滚动注意到葡萄上没有发生混蛋，所以我在最大元素上设置了等于该大小的最小宽度和高度。似乎成功了。

#foodCarousel img.pos3 {
    min-width:150px;
    min-height:111px;
}
于 2013-08-13T14:20:13.343 回答