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 に答える