1

ここ数日、視差スクロール サイトの作成をいじくり回してきました。さまざまな背景画像をスクロールする素晴らしいプロトタイプが機能しています。かなりかっこよく見えます。

もう一歩進めたいと思います。基本的に、背景画像が割り当てられた div があります。背景画像が異なる速度でスクロールします。左矢印または右矢印をクリックしてその背景を変更する機能を追加したいと考えています。基本的にカルーセル。ただし、ユーザーが下にスクロールした場合でも、視差効果を維持したいと考えています。

HTML の構造は次のとおりです。

<section id="one">
<div id="mainimagewrapper">
    <div class="image1">
        <div class="image2">
            <div id="textdiv">this is some text</div>
        </div>
    </div>
</div>
</section>

mainimagewrapper には、変更したい大きな画像が含まれています。textdiv は、次の画像へのリンクを追加する場所になります。

これを行う方法について何か考えはありますか？

4

1 に答える 1

1

js は、背景を配列からランダムなものに変更します。

function changeBG()
{
    var images = new Array('http://www.windows-7-wallpapers.com/wallpapers/img24-1920x1200.jpg',
                           'http://www.pptbackgroundstemplates.com/backgrounds/seamless-white-texture-ppt-backgrounds-powerpoint.jpg',
                          'http://awesomewallpapers.files.wordpress.com/2009/08/white2.png',
                          'http://www.wallpaperpimper.com/wallpaper/Flower/Flower_Art/Flower-Art-Winter-White-1-1920x1200.jpg');

    $('#mainimagewrapper').css("background-image", "url("+ images[getRandom(0, images.length - 1)] +")");
}




function getRandom(min, max) {
    if (min > max) {
        return -1;
    }

    if (min == max) {
        return min;
    }

    var r;

    //do {
    r = Math.random();
    //}
    //while (r == 1.0);

    return min + parseInt(r * (max - min + 1));
}

次のようにボタンを作成できます。

<input type="button" onclick="changeBG();" >

またはこのように：

<a href="javascript:changeBG();">ButtonText</a>

これにより、背景画像がその4つの画像のランダムな画像に変更されます...

于 2013-02-07T16:59:35.120 に答える