1

使用 JQuery Cycle 插件时遇到问题。我正在使用它来调用（目前最终是 4 个）2 个内容代码块（图像、链接文本和底部导航）。当我加载页面进行测试时，它只会在第一张幻灯片上抛出第一次调用样式. 被抛出的元素有一个 position:relative 参数。这是HTML：

<div class="slide">
  <img src="images/cycle_img_test.jpg" />
  <figure class="slide_link">
  </figure>
  <p class="slidelink_text">1 View Our Reports</p>
  <img src="images/slider_arrow.png" class="link_arrow">
    <div class="slide_nav">
    </div>
      <div class="slidenav_content">
        <p class="nav_left">&lt;</p>
        <img src="images/slide_nav_current.png" />
        <img src="images/slide_nav_other.png" />
        <img src="images/slide_nav_other.png" />
        <img src="images/slide_nav_other.png" />
    <p class="nav_right">&gt;</p>
      </div>
</div>

这是调用 .slideshow 的 Js：

<script src="js/cycle.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
            $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade,     scrollUp, shuffle, etc...
            });
        });
</script>

这是引用样式的 CSS：

.slide_link { width:217px; height:38px; background:#d2a709; opacity:.4; position:absolute; top:255px; z-index:10; }

.slidelink_text { vertical-align:center; font:bold 16px carto_bold, arial, helvetica, sans-serif; line-height:18px; letter-spacing:.01em; padding-left:35px; color:#fafafa; position:absolute; top:265px; z-index:11; }

.slide_nav { background:#3a4c5b; opacity:.6; width:605px; height:33px; position:relative; bottom:63px; left:25px; }

.slidenav_content { max-width:600; height:33px; position:relative; bottom:89px; left:35px; }

.slidenav_content img { position:relative; left:245px; }

.nav_left{ position:relative; float:left; color:#fff; }

.nav_right{ position:relative; float:right; right:395px; color:#fff; }

如果您能就为什么循环仅在第一张幻灯片的第一个提示上错误地加载样式提供任何建议，我将不胜感激。或者即使您可以辨别错误是在 CSS 中还是在 Js 中，也肯定会有所帮助。

谢谢！

4

2 回答 2

0

由于没有人回应，我会试一试：

你的问题有点含糊。但是您可以将此演示用作参考。

如您所见，它包含所有元素relative并使用非常清晰和简单的布局。

您的示例可能无法正常工作，因为调用函数时缺少连贯的参数cycle，从而干扰了您希望 HTML 显示的方式。

祝你好运。

于 2013-07-03T21:34:27.050 回答
0

如果您在幻灯片插件中使用“随机”和/或“超时”选项，您可能想尝试使用首先隐藏幻灯片然后显示并加载它的技巧。前任：

$('.slideshow').hide();

在盯着插件之前。所以它会像：

<script>
$('.slideshow').hide();
$(document).ready(function() {
$('.slideshow').show();
        $('.slideshow').cycle({
            fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });
</script>

如果样式只停留在第一个面板上而不是下面的面板上，那么很可能是 CSS 问题。

于 2014-04-16T20:33:14.077 回答