0

モバイル Web サイト用の小さなスライドショーを作成しようとしています。

これはhtmlです：

<div id="gallery">
    <a id="prev" data-icon="arrow-l" data-iconpos="left" data-role="button" href="#">Previous Image</a>
<div class="gallery-pic">
    <img class="slider" src="images/gallery/chateau-slider-1.jpg" />
</div>
<a id="next" data-icon="arrow-r" data-iconpos="right" data-role="button" href="#">Next Image</a>
</div>

これはjqueryコードです：

$(document).ready( function() {

        var height = $('.slider').height();
        $('.gallery-pic, .slider').css('min-height',height);

        $('#prev').click(function(prev) {
            prev.preventDefault();
            var nameImg = $('img.slider').attr('src').split('/');
            var fileName = nameImg[2].split('-');
            var exp = fileName[2].split('.');
            var numImg = parseInt(exp[0]);
            if(numImg == 1) {
                numPrevImg = 18; }
            else {
            var numPrevImg = numImg - 1; }
            $('img.slider').fadeOut(500, function() {
                $('img.slider').attr('src','images/gallery/chateau-slider-' + numPrevImg + '.jpg');
                $('img.slider').fadeIn("slow");
            });
        });


        $('#next').click(function(next) {
            next.preventDefault();
            var nameImg = $('img.slider').attr('src').split('/');
            var fileName = nameImg[2].split('-');
            var exp = fileName[2].split('.');
            var numImg = parseInt(exp[0]);
            if(numImg == 18) {
                numNextImg = 1; }
            else {
            var numNextImg = numImg + 1; }
            $('img.slider').fadeOut(500, function() {
                $('img.slider').attr('src','images/gallery/chateau-slider-' + numNextImg + '.jpg');
                $('img.slider').fadeIn("slow");
            });
        });
    });

基本的には、次の画像を検索して src 属性を変更します。

min-height プロパティを使用しても、コンテナ (.gallery-pic) の 1/2 秒間は小さくなります。iPhone の Safari でこの問題が発生していることに注意してください。ブラウザですべて問題ありません。

助けてください、気が狂いそうです。

ありがとう

4

1 に答える 1

1

基本的に、コンテナには異なるサイズが設定されています。コンテナーの高さと幅が固定されていること、およびコンテナーの子に合わせて拡張されないことを確認してください。src を変更すると、一瞬内部に画像がないため、サイズに合わせて拡張するものは何もありません。

CSSでそれを変更すると、すべてがうまくいくはずです。

iPhoneシミュレーターからあなたのウェブサイトを見ています。

HTML マークアップまたは JavaScript 内から min-height を 0 に設定しているため、CSS から min-height:160px;set をオーバーライドしています!!!!

また、min-height を 160px に設定し、高さが 160px を超える画像がある場合、その効果も確実に見られます。画像が展開される前に、コンテナはわずかに小さくなります。

于 2012-12-18T10:43:08.293 に答える