Question

我有一个站点，在介绍div中有一个旋转的横幅图像，在页面div中有一个主页的其余部分。我想做以下事情：

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

当前网站：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

1，如何在完成最后一张幻灯片后隐藏包含当前旋转横幅图像的介绍div并显示主页的其余部分。

您需要检查最后一张图片是否包含.active，然后使用.delay()隐藏#intro并显示#page，例如：

if ($(.skip-intro li).last().hasClass('active')){
  $('#intro').delay(2000).addClass('.hidden').queue(function() {
    $('#page').removeClass('.hidden');
  });
}

2，或者如果用户点击跳过介绍文本，那么它也会显示主页。

$('.skip-intro').click(function(){
  $('#intro').addClass('.hidden');
  $('#page').removeClass('.hidden');
});

Answer 2

基本上你需要的是：

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'
});

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

如何在图像滑块完成在jquery中加载后重定向页面？

2 个答案:

demo jsBin