2

我正在开发一个 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>
4

2 回答 2

1

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

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

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

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

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

于 2012-12-06T20:14:44.220 回答
0

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

于 2012-12-06T20:07:05.410 回答