2

私はjQueryスライダーに取り組んでいます。これまでに2つの画像があり、最初の画像は正しく配置されていません。

これが私が働いているURLです：http ：//www.ayrturfandtrac.org/

ページの左下にあります。

最初の画像を2番目の画像と同じ場所（ボタンの中央）に配置したいと思います。

これが私のコードです：

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');
});

ただし、画像の元の幅の1つは、他の幅よりもはるかに大きくなっています。ブラウザで画像のサイズを変更しているだけなので（これは決して良い考えではありません）、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 に答える