jquery循环寻呼机导航在第二张幻灯片上消失

我想覆盖一个寻呼机导航，就像这里所做的那样：

当下面的代码位于静态html站点中时，它可以正常工作。但当我在Drupal页面模板中添加这个时。我的第二张幻灯片出现了，寻呼机导航消失了。这是DOM/Cache/Drupal问题吗？导航div只需要添加一次，它应该显示在所有子div幻灯片的顶部。 这是我的模型代码：

头部

<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx:'fade',
pager:'#nav'
});
});
</script>

$（函数（）{
$（“#幻灯片放映”）。循环({
外汇：'褪色'，
寻呼机：“#导航”
});
});

html

---

我认为您的标记是错误的。 试着这样做：

<div id="slideshow"> 
    <div id="nav"></div> 
    <div class="slide">
        <?php print $node->field_test1_image[0]['view']; ?>
    </div> 
    <div class="slide">
        <?php print $node->field_test2_image[0]['view']; ?>
    </div>
</div>

请注意，id=“slide”更改为class=“slide”-应该只有一个元素具有唯一的id；）

---

编辑：我忘了提到第二张幻灯片上的导航已消失，因为您将其放入了第一张幻灯片包装中。

经过更多测试后，我发现标题没有循环。 如果将嵌套的div与多个项一起使用，并且希望每个嵌套的div循环，那么下面是有效的方法。诀窍是将#nav改为.nav，并在每个嵌套div中放置.nav

头

jQuery（文档）.ready（函数（）{
jQuery（“#幻灯片放映”）.cycle({
外汇：“淡出”，
寻呼机：'.nav'
});
});

身体

before或after功能将始终显示导航，但我不希望导航出现在滑块之前或之后。我希望它位于滑块div.$（'#slideshow'）。在（''）之前。循环({我知道我用了两次ID。我把它改成了类，但是寻呼机导航还是不见了。还有另外一个功能。在之前还是之后？可能是一个.embed？像我在回答中做的那样，把#nav元素放在第一张幻灯片外面。这很有效！谢谢Kisiou。我可能会发布另一个问题，问你如何像这里一样替换寻呼机号码：用其他数据，如标题。

<div id="slideshow"> 
    <div id="nav"></div> 
    <div class="slide">
        <?php print $node->field_test1_image[0]['view']; ?>
    </div> 
    <div class="slide">
        <?php print $node->field_test2_image[0]['view']; ?>
    </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#slideshow').cycle({
fx:     'fade',
pager:  '.nav'
});
});
</script>

<div id="slideshow"> 
<div class="slide">
<div class="nav"></div>
<?php print $node->field_test1_imagetitle[0]['view']; ?>
<?php print $node->field_test1_image[0]['view']; ?>
<a href="<?php print $node->field_test1_read[0]['value']; ?>">read more</a>
</div> 


<div class="slide">
<div class="nav"></div>
<?php print $node->field_test2_imagetitle[0]['view']; ?>
<?php print $node->field_test2_image[0]['view']; ?>
<a href="<?php print $node->field_test2_read[0]['value']; ?>">read more</a>
</div>
</div>