Question

我正在使用JavaScript创建幻灯片，并希望相对于图像定位控件（下一个和上一个按钮），使其距离图像顶部50％。

这是我的HTML：

<div id="slideshow">
            <figure>
                <img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg" />
                <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
            </figure>
            <figure>
                <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg" />
                <figcaption>Insert caption</figcaption>
            </figure>
            <figure>
                <img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg" />
                <figcaption>Insert caption</figcaption>
            </figure>

        </div><!-- end slideshow -->

我使用JavaScript在幻灯片放映的结束div上方插入我定位的跨度。

最初的计划是将按钮放在相对于幻灯片div的位置。但是，如果标题跨越多行，则幻灯片显示高度增加，按钮移动。

我希望按钮的位置相对于图像的高度是恒定的。因此，不管相对于整个幻灯片div（包括标题）定位跨度，我都希望它相对于图像定位自己，而不管标题的高度如何。

我无法定位像素，因为幻灯片必须是响应式的。

这是我的JS小提琴：

https://jsfiddle.net/amykirst/vtsru170/

我的一个想法是通过将图像和跨度包装在div中来更改HTML，如下所示：

<figure>
                <div class="img-contain">
                <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg" />
                </div>
                <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
            </figure>

然后将JavaScript插入＆＃34; img-contains＆＃34; div并将其与该div相关联。 JavaScript需要找到当前正在显示的图像，并在每次＆＃34; next＆＃34;时添加跨度。或＆＃34;之前＆＃34;按钮被按下。

现在，它会在页面加载时添加一次按钮。

我认为我的新解决方案可能会使事情变得太复杂，所以我想看看是否有更好的答案。

Answer 1

你走了：

https://jsfiddle.net/vtsru170/4/

诀窍是向下一个/上一个跨度添加padding-bottom以匹配图像的高度（根据宽高比）。我在标签内部使用了p标签作为按钮样式。

位置跨度元素从图像顶部50％

1 个答案: