1

私はほとんどそこにいます。ただし、解決できないバグがあります。問題は、ピクセルではなくパーセンテージを使用することにあると思います（さまざまな画面幅に合わせてバナーのサイズを変更したいため）。

バナーは 5 秒ごとにスクロールしますが、最初に戻る前に 3 番目の画像に到達するだけです。また、ウィンドウのサイズを非常に小さく変更すると、バナーは最初の 2 つの画像間でのみ回転します (また、存在しない 5 番目の画像にスクロールして、空白を表示することもあります)。

私はJavascriptで遊んだことがあります。IF ステートメントを < -400% に変更します (3 つの画像間でローテーションします)。< -800% に設定すると 2 つの画像になり、< -1000% に設定すると最初に戻りません! 私は非常に混乱していますが、明らかな何かが欠けている可能性があります。

HTML:

<div id="wrapper">

    <div id="subwrapper3">

        <div class="bannerwrapmain">
            <img src="/images/banner-image-1.jpg" />
        </div>

        <div class="bannerwrapmain">
            <img src="/images/banner-image-2.jpg" />
        </div>

        <div class="bannerwrapmain">
            <img src="/images/banner-image-3.jpg" />
        </div>      

        <div class="bannerwrapmain">
            <img src="/images/banner-image-4.jpg" />
        </div>  

    </div>

</div>

CSS:

#wrapper 
{
    width:100%;
    overflow:hidden;
    margin:0px 0px 0px 0px;
    padding:0px;
}

#subwrapper3
{
    width:400%;
    overflow:hidden;
    margin: 0px;
    padding:0px;
}

.bannerwrapmain
{
    display: block;   
    width:25%;
    margin:0px;
    padding:0px;
    float:left;
}

.bannerwrapmain img
{
    width:100%;
    margin:0px;
    padding:0px;
    height:auto;
    border:none;
}

ジャバスクリプト:

window.setInterval(function(){

if ($("#subwrapper3").css("marginLeft") < "-300%") { 
    $("#subwrapper3").animate({ marginLeft: '0%' });
} else {
    $("#subwrapper3").animate({ marginLeft: '-=100%' });        
}

}, 5000);
4

1 に答える 1

1

メイン ラッパーを 1000px などの固定サイズに設定してみてください。次に、サブラッパーを 100% に、画像を max-width:100% にします。

#wrapper{width:1000px;}
#subwrapper3, .bannerwrapmain{width:100%;}
.bannerwrapmain img{max-width:100%;}

その後、メディア クエリを使用して、画面サイズに基づいてメイン ラッパーの幅を変更できます。含まれる要素はそれに合わせてスケーリングされます。

@media screen and (max-width:500px){    
    #wrapper{width:500px;}
}

数か月前にコンテンツ スライダーを作成しました。参考になるかもしれません... http://codepen.io/lukeocom/pen/mHyBv

于 2013-04-30T00:55:12.360 に答える