添加自动播放到 jQuery 幻灯片

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： 导航{ 位置：绝对； 最高：4%； 剩余：10.45%;
} 导航一个{ 向左飘浮; 显示：内联块； 宽度：15px； 高度：15px； 边距：0 7px； 背景：#fff; 不透明度：0.85； 边框半径：999px； 光标：指针； 过渡：全部 150ms； } 导航 a：悬停，导航 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