帶有鏈接的jQuery圖像滑塊可阻止旋轉器更改圖像

Question

我已經用jQuery制作了圖像旋轉器/幻燈片，當它只是圖像時效果很好，但是如果我將img標簽包裹在href中，則幻燈片將不會移過第一張圖像。 我對jQuery還是很陌生，但是我猜想它與代碼的img：first / img：visible部分有關，因為它在容器中查找圖像，而不是a標簽。 我嘗試用一​​個跨度包裝img標簽，並為該類分配代碼要查找的內容，因此無論是圖像還是具有鏈接的圖像都沒有關系，但我似乎無法理解起作用（盡管我可能做錯了）。

還要注意的一件事是，圖像列表是用PHP動態創建的，如果我可以使用它，則設置后，圖像周圍的href將由PHP添加-因此，並不總是保證圖像將始終是鏈接與否，或者可能是混合。

無論如何，這是下面的代碼片段； 這也是它的一個小提琴 ，因為它現在沒有鏈接的圖像。

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">  

    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_shop.jpg" alt="Slide 1" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_podcasts.jpg" alt="Slide 2" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_page_ed.jpg" alt="Slide 3" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_members.jpg" alt="Slide 4" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_more.jpg" alt="Slide 5" title="" />

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

</div>​

jQuery的：

var Speed = 5000; //Time in Ms

(function imageTransition() {
setTimeout(function() {
    $('#image-container img:visible').fadeOut("slow"); // FADE OUT VISIBLE IMAGE
    if ($('#image-container img:visible').next('img').size("slow") < 1) {
        $('#image-container img:first').fadeIn(); // FADE IN FIRST IMAGE    
        $('#slide_caption').html('<span>' + $('#image-container img:first').attr('title') + '</span>');

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

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

- - -編輯 - - -

由於解決方案中出現了一個新問題，因此我提出了一個新的問題來解決，而不是全部包含在下面的注釋中： jQuery圖像滑塊標題問題，顯示錯誤

Answer 1

將每個幻燈片包裝在div中，如下所示：

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

然后淡出並淡入div，而不是圖像本身。