0

现场 js-Fiddle 演示链接：http: //jsfiddle.net/ivandude/r2UgV/1/

正如您所看到的，页面被分成 4 张幻灯片，它们在幻灯片的单击时打开。将鼠标移动到区域上的简单功能，然后单击一个以打开幻灯片的完整功能到目前为止，一切正常。

不幸的是，当其中一张幻灯片处于全视图时，问题是试图向前导航（单击下一步按钮）。[请参阅幻灯片 1（单击打开）并单击 > 箭头]。我只想想办法导航到下一张幻灯片。我的逻辑思维是只为我唯一的 ID 箭头按钮分配一个 jQuery Click 事件，并告诉 page-1 关闭，而 page-2 在它之后打开 <--- 但是这不起作用。

为了便于编辑和使用，我在上面准备了一个已注释的 jQuery。我认为最好查看下面的页面及其受影响的区域，但是如果您正在阅读并能够帮助我，非常感谢您:) 我已尝试使用 JS Fiddle 和下面的解释使其尽可能简单.

按执行顺序：

  1. 在页面加载 > 每个页面（4 张幻灯片之一）通过 CSS width:25%设置。他们得到他们的高度来动态地填充浏览器窗口，但在这里并不重要。

  2. 在身体负荷上 > 百分比已经发挥了它们的魔力，现在 jQuery 通过 jQuery 将这些百分比转换为可变数据。

    $("#page-1, #page-2, #page-3, #page-4").each(function() {
$(this).data("standardWidth", $(this).width());
});

    它们稍后用于放大（提供预览）到幻灯片的悬停效果。（例如，在不点击的情况下移动鼠标）

  3. 当鼠标悬停在幻灯片上时，会发生这种情况：

    $("#page-1, #page-2, #page-3, #page-4").mouseenter(function() {

$(this).parent().children().not(this).animate({
    opacity: 0.5,
    width: (($(this).data("standardWidth") - 34)+'px')
}, 250 );

$(this).animate({
    opacity: 1,
    width: (($(this).data("standardWidth") + 100)+'px')
}, 250 );

});

    没有 mouseleave 事件。

  4. 单击幻灯片时会发生这种情况：

    $("#page-1, #page-2, #page-3, #page-4").click(function() {

$(this).parent().children().not(this).animate({
    opacity: 0,
    width: ((0)+'px')
}, 300 );

$(this).animate({
    opacity: 1,
    width: $(document).width()
}, 300 );

});

  5. 当然，这是我在单击时尝试制作的唯一按钮，第 1 页将折叠（宽度为 0？），第 2 页展开（宽度为 100%？），并在某种可行的 jquery 代码中，以便我可以分配每个按钮的自定义功能:)

    $("#s1-arrow-r").click(function() {

$("#page-1, #page-3, #page-4").parent().children().stop().animate({
    opacity: 0,
    width: ((0)+'px')
}, 300 );

$("#page-2").stop().animate({
    opacity: 1,
    width: $(document).width()
}, 300 );

})

我为每个手动下一步按钮制作唯一的 ID 没有问题，因为这个微型网站不会有超过 4 张幻灯片，而且我自己也在进行一些手动学习。

4

1 回答 1

0 
RETURN FALSE;

已用于解决此问题。幻灯片不断恢复到其原始状态，这有助于 .click(function() 在关闭之前。如果需要，请联系我以获取更多详细信息...

于 2013-03-11T23:49:27.543 回答