使用jquery在幻灯片更改时移动div

我有一个小的矩形链接框，其位置我想要在幻灯片中更改幻灯片时更改。使用jquery在幻灯片更改时移动div

焦点中幻灯片的不透明度更改为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 Cycle插件http://jquery.malsup.com/cycle/

来源

2012-10-23 Enthusiast

采取ü可以创建一个的jsfiddle例子，所以我们可以在你使用的是哪个幻灯片插件，帮助你 – henkieee

？他们中的很多人都拥有在幻灯片动画之前/之中/之后触发的自定义事件，因此您可能可以在该动画中进行勾选。 – boz

我正在使用jquery循环插件http://jquery.malsup.com/cycle/ – Enthusiast

可以使用after过渡回调。转换完成后它会触发。

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

从http://jquery.malsup.com/cycle/options.html

来源

2012-10-23 08:32:09 boz

使用jquery在幻灯片更改时移动div

回答

相关问题