0

我有一个小的矩形链接框，当幻灯片中的幻灯片更改时，我想更改其位置。

焦点幻灯片的不透明度更改为 1，因此我尝试检查并相应更改框的 CSS，但这不适用于前景中的幻灯片，即新的 CSS 适用于所有幻灯片。

这是我的尝试：

<div id="slideshow">
    <ul id="nav">
        <li id="prev"><a href="#">Previous</a></li>
        <li id="next"><a href="#">Next</a></li>
    </ul>
    <ul id="slides">
        <li style="position: absolute; top: 0px; z-index: 3; opacity: 0; display: none; "><img src="image1.png" /></li>
        <li style="position: absolute; top: 0px; z-index: 3; opacity: 1; display: none; "><img src="image2.png" /></li>
        <li style="position: absolute; top: 0px; z-index: 3; opacity: 0; display: none; "><img src="image3.png" /></li>
    </ul>
 <a class="rectangle" style="top: 282px; left: 723px; width: 170px; height: 40px;" href="#"></a>
</div>



<script type="text/javascript">
$("#slides li").each(function() {
    if($(this).css("opacity")==1){
       $(".rectangle").css("top","200px");
}
});
</script>

什么是正确的方法来确保盒子只按照滑块移动li style="opacity:1;"？

编辑：我正在使用 jquery 循环插件http://jquery.malsup.com/cycle/

4

1 回答 1

0

您可以使用after转换回调。转换完成后它将触发。

$('#slide').cycle({ 
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        $(".rectangle").css("top","200px");
    }
});

取自http://jquery.malsup.com/cycle/options.html

于 2012-10-23T08:32:09.720 回答