1

現在、全幅のランディング ページである 4 つのページがあります。オートプレイを可能にする機能を追加したいと考えています。これにより、機能がスライドショーのようになり、静的なランディング ページのようにはなりません。

ランディング ページの現在のナビゲーションには、「現在のナビゲーション アイテム セレクター」があります。jquery自動再生機能を追加したい現在のナビゲーションのコードは次のとおりです。

$(document).ready(function() {
    /** nav selector **/
    var bodyid = $('body').attr('id');   
    $('nav a.'+ bodyid).addClass('active');
    $("body").css("display", "none");

    $("body").fadeIn(500);

    $("a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(500, redirectPage);     
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});

Nav の HTML は次のとおりです。

これが私の CSS です: nav { position:absolute; 上:4%; 左:10.45%;
} nav a { float:left; 表示: インラインブロック; 幅: 15px; 高さ: 15px; マージン: 0 7px; 背景: #fff; 不透明度: .85; ボーダー半径: 999px; カーソル: ポインタ; トランジション: すべて 150ms; } nav a:hover, nav a.active{ opacity:1; 背景:#007cc0; }

4

1 に答える 1

0

手始めに、iframe を使用してランディング ページをラップし、一部のトランスポート コントロールやナビゲーションがユーザーに対して一定に保たれるようにすることを検討してください。あなたの現在の配置は混乱しているかもしれませんが、目的がわからないので...

各ランディング ページの HTML で次のページを静的に定義し、一定時間後に setTimeout() を使用してその場所に移動することをお勧めします。

より洗練された実装には、自動再生を停止する方法が含まれます。

var nextPage = "http://your_domain.com/landing_page_2.html"; // set in each page.
var autoPlayEnabled = true; // toggle this with a play/pause button of some kind.

function navToNext()
{
   if(autoPlayEnabled)
   {
       $("body").fadeOut(500, function(){ window.location = nextPage; });           
   }
}

setTimeout(navToNext, 5000); // five seconds
于 2013-07-10T20:26:50.653 に答える