0

我用 jQuery 制作了一个图像旋转器/幻灯片，当它只是图像时效果很好，但是如果我将 img 标签包装在 href 中，那么幻灯片将不会移过第一张图像。我对 jQuery 还很陌生，但我猜它与代码的 img:first/img:visible 部分有关，因为它在容器中查找图像，而不是 a 标签。我已经尝试用 span 包装 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 图像滑块标题问题，显示错误

4

1 回答 1

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 而不是图像本身。

于 2012-10-01T10:40:28.730 回答