1

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

我当前的登录页面导航有一个“当前导航项选择器”；这是我当前导航的代码，我想将 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 { position:absolute; 最高：4%；左：10.45%；
} 导航一个 { 浮动：左；显示：内联块；宽度：15px；高度：15px；边距：0 7px；背景：#fff; 不透明度：0.85；边框半径：999px；光标：指针；过渡：全部 150ms；} 导航 a：悬停，导航 a.active{ 不透明度：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 回答