0

我想创建一个带有滑动图像滑块的花式框。按照 fancybox 的操作指南页面中的说明，我创建了一个隐藏的 div，其中将放置我的滑块。

<div style="display:none">
  <div id="hidden" >
    <div id="mySwipe" class='swipe'>
      <div class='swipe-wrap'>
        <div><b>0</b></div>
        <div><b>1</b></div>
        <div><b>2</b></div>
      </div>
    </div>
    <div style='text-align:center;padding-top:20px;'>
      <button onclick='mySwipe.prev()'>prev</button>
      <button onclick='mySwipe.next()'>next</button>
    </div>
  </div>
</div>

现在我使用这样的隐藏内容来填充一个幻想框：

<p align="center"><a class="fancybox" href="#hidden">Click me</a></p>

不幸的是，这有一些问题，我的滑块内容为空（或隐藏？）。换句话说，我没有得到幻灯片 0 -> 1 -> 2。

我想这个问题是由 'display:none' 样式引起的。事实上，如果我把它拿出来，幻灯片就可以工作，但它会显示隐藏的内容，我不想要这个。

在这里，我向您报告我的html的负责人：

<!-- Add JQuery -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>

<!-- Add Swipe Slider -->
<script src="js/slider/swipe.js"></script>
<style>
/* Swipe 2 required styles */


.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > div {
    float: left;
    width: 100%;
    position: relative;
}

/* END required styles */
</style>

<!-- Add Fancybox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $(".fancybox").fancybox();
    var elem = document.getElementById('mySwipe');
    window.mySwipe = Swipe(elem, {});
    });
</script>
4

1 回答 1

2

您可以尝试设置而不是 display:none

<div style="position:absolute; left:-5000px;">

这样，结果类似于 display:none （div 的内容不可见），您应该避免描述的问题

于 2013-07-02T10:07:07.050 回答