javascript - 图像 slider 在 jquery 中完成加载后如何重定向页面？

Question

我有一个网站，在介绍 div 中有一个旋转的横幅图像，在页面 div 中有主页的其余部分。我想执行以下操作:

1. 我们如何在完成最后一张幻灯片后隐藏包含当前旋转横幅图像的介绍 div 并显示主页的其余部分。
2. 或者，如果用户点击跳过介绍文本，那么它也会显示主页。

当前站点:http://new.brandonplanning.com/home

我认为这段代码需要修改

/*-------------Intro page slider starts-----------*/

var intervalID;

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ($active.length == 0) $active = $('#slideshow IMG:last');

    //var $next = $active.next().length ? $active.next()
    //    : $('#slideshow IMG:first');

    var $next;
    if ($active.next().length) {
        $next = $active.next().delay(3000);
    } else {
        clearInterval(intervalID);
        visibilityCheck();
        return;
    }

    $active.addClass('last-active');

    $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function () {
            $active.removeClass('active last-active');
        });
}

$(function () {
    intervalID = setInterval("slideSwitch()", 6000);
});

/*-------------Intro page slider ends-----------*/

/*-------------Intro page skip starts-----------*/

$(window).load(function () {
    $(function () {
        visibilityCheck();
        $('#loader').remove();
    });

    $('.skip-intro').click(function () {
        visibilityCheck();
    });
});

function visibilityCheck() {
    $('.hidden').removeClass('hidden');

    if ($('#page').is(':hidden')) {
        $('#intro').addClass('hidden');
    } else {
        $('#page').addClass('hidden');
    }
}

/*-------------Intro page skip ends-----------*/

提前致谢

Answer 1

基本上你需要的是:

demo jsBin

$('#slider img:gt(0)').hide();

var T; // timeout
var c = 0;  // counter
var imgN = $('#slider img').length; // get the images Number

function toggler(){    // screens toggler function
  $('#intro').fadeTo(400,0).siblings('#page').fadeTo(400,1);
}

function a(){  // 'A'nimations
  if(c === imgN ){   // if the 'C'ounter reached the images in slider...
    toggler();       // toggle our screens
  }else{             // else ... do our animations.
    $('#slider img').siblings('img').stop().fadeTo(1000,0).eq(c++).stop().fadeTo(1000,1);
  }                                                        // ^^^^ here the counter 'ticks'
}

function aa(){ // 'A'uto 'A'dvance
   T=setTimeout(function(){
       a();
       aa();
   },2000);     // set here pause between slides
}
aa();


$('#skip').click(function(){  // if 'skip' is clicked...
  clearTimeout(T);                 // well...
  toggler();                       // run our screens 'toggler'
}); 

希望您能轻松地将其实现到您的页面中。