0

我几乎让它工作了，只是第一个和第二个标题搞砸了，我不知道为什么！我玩过 if 语句和 :visible 选择器等，看看是什么让它发生了变化，但无法理解。
你可以看到我的意思这个小提琴：jsfiddle.net/MrLuke/QSj4k/33

如果它显示第一个标题，但第二个不会显示，或者它将显示第三个标题代替第二个标题，并显示它第三个。这让我很困惑。似乎第一个和第二个标题搞砸了，之后的任何其他标题都会正确显示。 

//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
})();

这是查看图像是否具有标题属性的部分，然后将其插入到跨度标记之间以显示标题：

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/

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

刚刚测试了第一次空它的工作原理，你只是有那个额外的锚。由于那个锚 img 不再是 .slide 的 .children()(这是直接的孩子)，所以它不起作用

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

于 2012-10-01T17:23:25.883 回答