0

私は慈善団体のために非常にシンプルなモバイル サイトを設定しています。彼らは、地元の支援事業の独自の広告バナーを下部に表示したいと考えています。画像バナーを 10 秒ごとに順番に入れ替える単純な Javascript があります。

window.onload = function ()
{
    var rotator = document.getElementById("adBox");
    var images = rotator.getElementsByTagName("img");
    for (var i = 1; i < images.length; i++)
    {
      images[i].style.display = "none";
    }
    var counter = 1;
    setInterval(function ()
    {
       for (var i = 0; i < images.length; i++)
       {
          images[i].style.display = "none";
       }
       images[counter].style.display = "block";
       counter++;
       if (counter == images.length)
       {
         counter = 0;
       }
    }, 7000); //1000 = 1 second
};

<body ontouchstart="">
    <div id="adBox">
        <img src="_/ads/1.jpg" alt="One" width="320" height="70">
        <img src="_/ads/2.jpg" alt="Two" width="320" height="70">
        <img src="_/ads/3.jpg" alt="Three" width="320" height="70">
    <div>
</body>

ただし、これはリセットされ、別のページをロードするとシーケンスの最初に戻ります。私がやりたいことは、固定サーバー時間 (真夜中など) にシーケンスを開始し、循環することです。これにより、新しいページをロードしたときに、バナーの最初に戻るのではなく、「広告」に移動します。そのサーバー時間」。

これが広告の最もシンプルで公平な方法だと思います。私は iFrame の使用を検討しましたが、それはメイン サイトが 1 つに収まらなければならないことを意味し、タッチ デバイスでの iFrame のサポートはあまり良くないと思います (これは大きな問題になるでしょう)。

4

2 に答える 2

0

あなたのリクエストについて長い間考えましたが、解決策があると思います：

<html>
    <head>
        <script>
            window.onload = function ()
            {
                var pictureArray = new Array
                (
                  "https://www.gravatar.com/avatar/0eb8371e227b5f9993968b5f90f2a1d8?s=32&d=identicon&r=PG", 
                  "https://www.gravatar.com/avatar/9be5d328127c377109b295b5941733fb?s=32&d=identicon&r=PG",
                  "https://www.gravatar.com/avatar/9e84f23bd4c8b566e466a2d4d7fc5ed4?s=32&d=identicon&r=PG"
                );
                var counter = 0;
                var currentHour = new Date().getHours();
                if (currentHour >= 8 && currentHour < 16)
                {
                    counter = 1;
                } else if (currentHour >=16 && currentHour <= 23) {
                    counter = 2;
                }
                var rotator = document.getElementById("adBox");
                var images = rotator.getElementsByTagName("img");
                images[0].src = pictureArray[counter];
                setInterval(function ()
                {
                    images[0].src = pictureArray[counter];
                    counter++;
                    if (counter == pictureArray.length)
                    {
                        counter = 0;
                    }
                }
                , 7000); //1000 = 1 second
            };
        </script>
    </head>
    <body ontouchstart="">
        <div id="adBox">
            <img src="" alt="pic" width="320" height="70">
        <div>
    </body>
</html>

私の目には、元の方法が複雑すぎたので、コードを少し変更しました。それがあなたが望むものであることを願っています-私が理解したよりも良い-アーカイブする.

注: Javascript はクライアント側で動作するため、ローカル コンピューターから時間がかかります。サーバーから時間を取得したい場合は、それを HTML 出力に配置する必要があります。

于 2013-10-08T15:34:50.337 に答える