Question

我几乎让它工作了，它只是第一个和第二个标题混乱，我不知道为什么！我玩了if语句和：visible选择器等，看看是什么让它改变了，但是无法理解它你可以看到我的意思：jsfiddle.net/MrLuke/QSj4k/33

如果显示第一个标题，但第二个标题不显示，或者它将显示第三个标题代替第二个标题，并显示第三个标题。这让我很困惑。似乎第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>

我已经提到了，但为了以防万一，here's the fiddle看到一个实例（和问题）
任何人都可以看到为什么第一个和第二个标题不像其他标题那样起作用？

Answer 1

下面

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

我在第一张幻灯片中添加了标题，在第二张幻灯片中，您有一个我删除的锚标记，它可以正常工作。我还没有测试过第一个空标题

刚刚测试完第一个空它有效，你只需要那个额外的锚点。由于那个锚，img不再是.childl（）（这是直接的孩子）.slide所以它不起作用

如果你真的想要锚，那么用.find替换.children就像这里http://jsfiddle.net/QSj4k/37/

一样

jQuery图像滑块标题问题，显示错误

1 个答案: