1

我有一个网站，在介绍 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-----------*/

提前致谢

4

2 回答 2

1

1，我们如何在完成最后一张幻灯片后隐藏包含当前旋转横幅图像的intro 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');
});
于 2012-05-10T09:39:36.040 回答
1

基本上你需要的是这样的：

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

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

于 2012-05-10T10:43:56.480 回答