0

私はほとんどそれを機能させました.1番目と2番目のキャプションが台無しになっているだけで、その理由はわかりません! if ステートメントと :visible セレクターなどをいじって、何が変化するのかを確認しましたが、理解できません。
私が言いたいことに対するこのフィドルを見ることができます：jsfiddle.net/MrLuke/QSj4k/33

最初のキャプションが表示されるが、2 番目のキャプションが表示されない場合、または 2 番目のキャプションの代わりに 3 番目のキャプションが表示され、3 番目に表示されます。それは私を混乱させます。1 番目と 2 番目のキャプションが台無しになり、その後の他のキャプションは正しく表示されるようです。 

//DISPLAY OR HIDE FIRST CAPTION
var title = $('.slide:not("first")').children('img').attr('title');
if (title == "") {
    $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO ALT TEXT
} else {
    $('#slide_caption').fadeIn();
    $('#slide_caption').html('<span>' + title + '</span>'); //SHOW ALT TEXT CAPTION
}

(function imageTransition() {
setTimeout(function() {
    $('.slide:visible').fadeOut("slow"); // FADE OUT VISIBLE IMAGE
    if ($('.slide:visible').next('.slide').size("slow") < 1) {
        $('.slide:first').fadeIn(); // FADE IN FIRST IMAGE    

        var title = $('.slide:visible').children('img').attr('title');
        if (title == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO TITLE TEXT
        } else {
            $('#slide_caption').fadeIn();
            $('#slide_caption').html('<span>' + title + '</span>'); 
        }
    } else {
        $('.slide:visible').next('.slide').fadeIn("slow"); // FADE IN NEXT IMAGE 

        var title = $('.slide:visible').next('.slide').children('img').attr('title');
        if (title == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO TITLE TEXT
        } else {
            $('#slide_caption').fadeIn();
            $('#slide_caption').html('<span>' + title + '</span>'); 
        }               

    }

    imageTransition(); //TRIGGER FUNCTION AGAIN
}, Speed); //Xms INTERVAL BEFORE FUNCTION RUNS AGAIN
})();

これは、画像に title 属性があるかどうかを確認し、それを span タグの間に挿入してキャプションを表示する部分です。

var title = $('.slide:visible').children('img').attr('title');
        if (title == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO ALT TEXT
        } else {
            $('#slide_caption').fadeIn();
            $('#slide_caption').html('<span>' + title + '</span>'); 
        }

そしてHTML：

<div id="slide_wrapper">

    <p id="slide_controls">
        <span id="prev-but"><img src="http://webbossuk.com/admin/JS/webboss-slider/imgs/but_prev.png" alt="Previous" /></span>
        <span id="next-but"><img src="http://webbossuk.com/admin/JS/webboss-slider/imgs/but_next.png" alt="Next" /></span>
    </p>


<div id="image-container">  

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_shop.jpg" alt="Slide 1" title="" />
    </div>

    <div class="slide">
        <a href="#">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_podcasts.jpg" alt="Slide 2" title="2" />
        </a>
    </div>

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_page_ed.jpg" alt="Slide 3" title="3" />
    </div>

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_members.jpg" alt="Slide 4" title="4" />
    </div>

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_more.jpg" alt="Slide 5" title="5" />
    </div>

    <p id="slide_caption"><span></span></p>
</div>

</div>​

すでに言及しましたが、念のため、ライブの例 (および問題) を確認するためのフィドル
を次に示し ます。

4

1 に答える 1

1

ここ

http://jsfiddle.net/QSj4k/35/

最初のスライドにキャプションを追加しました。2 番目のスライドには、削除したアンカー タグがあり、機能します。最初のキャプションが空であることはまだテストしていません

最初に空でテストしたところ、動作します。余分なアンカーがありました。そのため、アンカー img は .slide の .children()(これは直接の子) ではなくなったため、機能しませんでした

本当にアンカーが必要な場合は、ここのように .children を .find に置き換えます http://jsfiddle.net/QSj4k/37/

于 2012-10-01T17:23:25.883 に答える