Question

我正在研究jQuery滑块。到目前为止有两个图像，第一个图像定位不正确。

以下是我正在处理的网址：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');
});

然而，其中一个图像的ORIGINAL宽度比另一个宽很多。您只是在浏览器中调整图像大小（这绝不是一个好主意），因此javascript将获得原始的非调整大小的值。您可以通过将边距值设置为-160px：

这样的良好值来对其进行硬编码

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

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

Answer 2

第一张图片上的元素样式设置为margin-left：-607px;这导致图像向左移动。你需要玩这个结构。也许将样式从HTML元素中取出并放入css文件中。我将它改为-160px，看起来更集中。

jQuery滑块上的第一个图像不合适

2 个答案: