Question

我有一个jssor滑块工作，包括显示字幕。每个标题在第一行显示标题，在标题下方的行显示描述。我想将滑块计数添加到标题中，所以在标题的右边我会显示，例如，“2 of 47”。根据我发现的另一篇文章，我将以下代码添加到js：

function DisplayIndex() {
$("#displayIndex").text(jssor_slider2.$CurrentIndex() + 1 + " of " + jssor_slider2.$SlidesCount());
}

DisplayIndex();
jssor_slider2.$On($JssorSlider$.$EVT_PARK, DisplayIndex);

我还将"<div id='displayIndex'"行添加到php代码中，从属于caption div，如下所示：

echo "<div class='caption2_text'>";
echo "<h1>$title</h1>";
echo "<p>$desc</p>";
echo "<div id='displayIndex' u='any' style='position: absolute; top: 10px; left: 790px; width: 100px; height: 26px;'></div>";
echo "</div>";

计数出现，但是在内部容器中而不是在标题中，因此任何全宽图片都会覆盖计数，并且计数不可见。如何将计数放入标题本身？非常感谢任何帮助。

Answer 1

我发现您将displayIndex元素放在标题中。你知道，标题应该是幻灯片的子元素。它总是与幻灯片一起移动。

更合理的方法是使displayIndex成为静态/固定元素。

静态/固定元素是与每张幻灯片平行的元素。它应该被视为幻灯片，但如果指定了u="any"属性，则它不再是幻灯片，它将始终保持原样。

<div u="slides">
    <div><!-- slide 1 --></div>
    <div><!-- slide 2 --></div>
    <div id='displayIndex' u='any' style='position: absolute; top: 10px; left: 790px; width: 100px; height: 26px;'>
        <!-- this is a static element -->
    </div>
</div>

参考：http://www.jssor.com/development/slider-with-fixed-static-element.html

如何将jssor滑块计数放入标题中

1 个答案: