Question

目前我有四个页面是全角着陆页。我想添加能够自动播放的功能。这会将功能更改为更像幻灯片，而不像静态登录页面。

我目前的着陆页导航有一个“当前导航项目选择器”;这是我当前导航的代码，我想添加一个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;
    }
});

这是我的导航HTML：

这是我的CSS： nav { 位置：绝对的; 顶部：4％; 左：10.45％;
} nav a { 向左飘浮; display：inline-block; 宽度：15px; 身高：15px; 保证金：0 7px; 背景：#fff; 不透明度：.85; border-radius：999px; 游标：指针; 过渡：全部150ms; } nav a：hover，nav a.active { 不透明度：1; 背景：＃007cc0; }

Answer 1

对于初学者，您可以考虑使用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

将自动播放添加到jQuery幻灯片中

1 个答案: