jquery cycle2获取当前幻灯片的宽度

Question

我正在使用jQuery Cycle2插件http://jquery.malsup.com/cycle2/demo/basic.php

我需要抓住当前幻灯片/图像的宽度，然后使用它来设置另一个元素的宽度。

每张图片的宽度可能不同，我需要在图片顶部放置一个条，以便相应调整大小。

<div class="cycle-slideshow">
<img src="http://malsup.github.com/images/p1.jpg">
<img src="http://malsup.github.com/images/p2.jpg">
<img src="http://malsup.github.com/images/p3.jpg">
<img src="http://malsup.github.com/images/p4.jpg">
</div>

如何获得当前/活动幻灯片的宽度？

Answer 1

您可以提示此插件会将类active添加到当前活动图像。所以你可以这样做以获得你想要的宽度：

var imgWidth = $(".cycle-slideshow").find("img.active").width();

然后你可以使用这个宽度值来设置其他元素的宽度：

$("other element selector").width(imgWidth);

---

修改

我假设您的next和prev按钮的HTML如下所示：

<div class="center">
    <a href="#" id="prev">Prev</a>
    <a href="#" id="next">Next</a>
</div>

然后你只需要这样做：

$("#prev, #next").on('click', function() {
    var imgWidth = $('.cycle-slideshow').find(".cycle-slide-active").width();
    $(".topbar").width(imgWidth); 
});