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

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

我当前登录页面的导航具有“当前导航项目选择器”；这是我当前导航的代码，我想向其中添加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：
    导航{
    位置：绝对；
    最高：4％;
    左：10.45％;
    }
    导航{
    向左飘浮;
    显示：inline-block;
    宽度：15像素；
    高度：15像素；
    边距：0 7px;
    背景：#fff;
    不透明度：.85；
    border-radius：999px;
    光标：指针；
    过渡：所有150ms；
    }
    导航a：悬停，导航a.active {
    不透明度：1;
    背景：＃007cc0;
    }

最佳答案

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

关于javascript - 将自动播放添加到jQuery幻灯片中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17579964/