jquery - 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我假设您和按钮的 HTMLprev如下所示：

<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); 
});