1

スライドショーに Jquery Cycle プラグインを使用しています。特定のスライドがアクティブになったときにイベントを追加したいと考えています。Cycle プラグインは、特定の div 内の画像の不透明度を次のように追加および削除することでこれを実現します。

<div style="position: absolute; top: 0px; z-index: 9; display: none; opacity: 0;">

画像がアクティブな場合、または現在のスライドである場合、不透明度は 1 に変わり、表示は「ブロック」になります。

今、divのCSSスタイル/属性を検出することから、そのdivにクラスを割り当てることまで、さまざまなアプローチを使用してみました。

if($("#slideshow > div:nth-child(2)").hasClass('fadeOut') == 1) {
    alert('Hello');
}

また

if($("#slideshow > div:nth-child(2)").css('opacity') == 1) {
    alert('Hello');
}

そしてさえ

if($(".fadeOut").css('opacity') == 1) {
    alert('Hello');
}

問題は、Cycle プラグインで動的に適用されたときに、JS が「不透明度: 1」スタイルを検出しないことです。一方、スタイルがcssファイルにインラインで適用されている場合は機能しますが、もちろん、ページが読み込まれた瞬間にイベントが発生するため、機能しません。 2 番目の画像がアクティブな画像である場合、つまり、「不透明度」が 1 に設定されているか、「表示」がブロックされていて、それを理解できないように見える場合のみ。

4

2 に答える 2

0

すべてのアプローチで要素の現在の状態を判断できる必要があります。問題は、適切なタイミングでそれらを検索することだと思います。

ただ: スタイル プロパティまたはクラス属性がいつ変更されたかを検出することはできません。それをキャッチする唯一の方法は、DOMModification イベントをリッスンすることです。かなり醜い方法です。

だから：別のプラグインを使用してください。画像が変更されたときに要素で [カスタム] イベントをトリガーするスライドショー プラグインが存在します。

于 2012-06-01T01:29:24.830 に答える
0

このようなものはあなたのために働くでしょうか？

html

<p></p>
<div class="slideshow">
    <img id="1" src="http://davealger.info/i/1.jpg" />
    <img id="2" src="http://davealger.info/i/2.bmp" />
    <img id="3" src="http://davealger.info/i/3.png" />
</div>

CSS

.slideshow { position:relative; }
.slideshow img { position:absolute; left:0; top:0; }​

js

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){
        var me=$('.slideshow :first-child');

        if ( me.attr('id') === '1' )
            $("p:last").html('getting ready to load slide 2');
        else
            $("p:last").html('');

        me.fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');
    }, 4000);
});​

下のデモリンク

http://jsfiddle.net/DaveAlger/CWkYt/

于 2012-06-01T01:47:58.007 に答える