jquery - jQuery slider 上的第一张图片不合适

Question

我正在研究 jQuery slider 。到目前为止有两张图片，第一张位置不正确。

这是我工作的网址:http://www.ayrturfandtrac.org/

它位于页面的左下方。

我希望将第一张图片与第二张图片放在同一位置(在按钮之间居中)。

这是我的代码:

HTML:

<div id="fader">
<img src="http://www.ayrturfandtrac.org/wp-content/uploads/2012/11/usedListing.png" class="usedListingImage">
<img src="http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/kubotaB2320.png" class="usedListingImage">
</div>

<div id="next">
<img id="nextListing" class="nextListing" src="http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/nextListingArrow.png" onmouseover="this.src='http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/nextListingHover.png'" onmouseout="this.src='http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/nextListingArrow.png'">
</div>

jQuery:

<script type="text/javascript">
jQuery (function() {
    $('#fader img:not(:first)').hide();

    $('#fader img').each(function() {
        var img = $(this);
        $('<img>').attr('src', $(this).attr('src')).load(function() {
            img.css('margin-left', -this.width / 2 + 'px');
        });
    });

    var pause = false;

    function fadeNext() {
        $('#fader img').first().fadeOut().appendTo($('#fader'));
        $('#fader img').first().fadeIn();
    }

    function fadePrev() {
        $('#fader img').first().fadeOut();
        $('#fader img').last().prependTo($('#fader')).fadeIn();
    }

    $('#fader, #next').click(function() {
        fadeNext();
    });

    $('#prev').click(function() {
        fadePrev();
    });

    $('#fader, .button').hover(function() {
        pause = true;
    },function() {
        pause = false;
    });

    function doRotate() {
        if(!pause) {
            fadeNext();
        }    
    }

    var rotate = setInterval(doRotate, 5000);

});

</script>

Answer 1

您正在根据图像的宽度设置图像的左边距:

$('<img>').attr('src', $(this).attr('src')).load(function() {
    img.css('margin-left', -this.width / 2 + 'px');
});

然而，其中一张图片的原始宽度比另一张大很多。您只是在浏览器中调整图像大小(这绝不是一个好主意)，因此 javascript 正在获取原始的未调整大小的值。您可以通过将其设置为良好的值(如 -160px)来硬编码 margin left 值:

img.css('margin-left', -'160px');

或者确保将图像调整为相同的宽度，或者您也可以在 div 中设置图像并获取 div 的宽度。