我在简介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-----------*/


提前致谢

最佳答案

基本上,您需要的是:

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


希望您可以轻松地将此实现到您的页面中。

关于javascript - 在jQuery中完成图像滑块加载后如何重定向页面?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10531221/

10-13 06:21
查看更多