Question

你可以在这里看到我的意思：http://petrichordesign.com/photo。如果你点击链接（在这种情况下，“凸出之战，沃尔夫的池塘公园”，它将正确显示幻灯片。但是，我将循环设置为false，但你可以从头开始和你到了最后，你可以再次看到第一个图像。当循环为真时也会发生同样的情况（即1-2-3-4-1-2-1-2-3-4）。这里有一些代码

$(document).ready(function() {
$("a.fancybox").fancybox({
    'mouseWheel'    :    true,
    'openEffect'    :   'elastic',
    'closeEffect'   :   'elastic',
    'nextEffect'    :   'fade',
    'prevEffect'    :   'fade',
    'openOpacity'   :   true,
    'closeOpacity'   :   true,
    'loop'        :   false,
  });
});

HTML（很长，抱歉）

<div class="slide"><img src="images/alison.jpg" width="825" height="378" alt="" /><span><a class="fancybox" rel="portfolio" title="Alison" href="images/alisonlarge.jpg">Alison</a></span></div>
<div class="slide"><img src="images/crane.jpg" width="825" height="378" alt="" /><span><a class="fancybox" rel="portfolio" title="Crane" href="images/cranelarge.jpg">Crane</a></span></div>
<div class="slide"><img src="images/vinnyangela.jpg" width="825" height="378" alt="" /><span><a class="fancybox" rel="portfolio" title="Vinny, Angela, and Jess (Double Exposed)" href="images/vinnyangelalarge.jpg">Vinny, Angela, and Jess (Double Exposed)</a></span></div>
<div class="slide"><img src="images/kellie.jpg" width="825" height="378" alt="" /><span><a class="fancybox" rel="portfolio" title="Kellie" href="images/kellielarge.jpg">Kellie</a></span></div>
<div class="slide"><img src="images/concourse.jpg" width="825" height="378" alt="" /><span><a class="fancybox" rel="portfolio" title="Concourse, SUNY New Paltz" href="images/concourselarge.jpg">Concourse, SUNY New Paltz</a></span></div>

如果您还需要了解其他信息，请与我联系。提前谢谢！

此致

Answer 1

使用引号将'loop'键更改为'cyclic'，如Fancybox API中所述。

$(document).ready(function() {
    $("a.fancybox").fancybox({
        'mouseWheel'    :    true,
        'openEffect'    :   'elastic',
        'closeEffect'   :   'elastic',
        'nextEffect'    :   'fade',
        'prevEffect'    :   'fade',
        'openOpacity'   :   true,
        'closeOpacity'   :   true,
        'cyclic'        :   false, // 'loop' to 'cyclic'
    });
});

Answer 2

在它周围放置一个div，为我工作;）

像这样：

<div>
  <div class="slide">...</div>
  <div class="slide">...</div>
</div>

Fancybox重复第一张和最后一张图片

2 个答案: