Question

我用jQuery制作了一个图像旋转器/幻灯片，当它只是图像时工作正常，但是如果我将img标签包装在href中，那么幻灯片将不会移过第一个图像。我仍然是jQuery的新手，但我猜它与img有关：first / img：代码的可见部分，因为它查找容器中的图像，而不是a标签。我已经尝试用一个span包装img标签，并将该类分配给代码所需的内容，因此无论是图像还是带有链接的图像都没关系，但我似乎无法获得这工作（虽然我可能只是做错了）。

需要注意的另一件事是图像列表是用PHP动态制作的，如果我能让它工作，那么图像周围的href将被PHP添加 - 如果设置 - 所以它并不总是保证图像将会永远是一个链接，或者它可能是混合。

无论如何，这是下面的代码片段;此处还有一个fiddle，因为它现在没有链接图像。

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 image slider caption issues, displaying wrong

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

带有链接的jQuery图像滑块可以阻止旋转器更改图像

1 个答案: