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

基本的に必要なものはこれです：

デモ 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 に答える
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');
});
于 2012-05-10T09:39:36.040 に答える