使用 jQuery 的自动可点击图片库，第一张图片淡入淡出 in/out 但其他图片不淡入？

Question

我有一个赞助商徽标画廊，设置为每 4 秒淡入下一张图片，使用 jQuery 和 CSS 制作。问题是这些图片在点击时必须 link 到相应的网页。当图像标签不在 link 标签中时，代码完全可以正常工作，但是只要在图像周围添加 link，第一张图像就会淡入，4 秒后淡出，然后下一张图片永远不会淡入，所以整个部分基本上消失了。有没有解决的办法？

jQuery代码：

$(function () {
        $('.fadein img:gt(0)').hide();
        setInterval(function () {
            $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
        }, 4000);
});

CSS代码：

.img {
position: absolute;
width: 20%;
margin-left: 40%;
}
.fadein {
position: relative;
}
.fadein img {
    top: 0;
}

HTML代码：

<div class="fadein">
    <a href="https://google.com/"><img class="img" alt="" src="ex1"/></a>
        <a href="https://google.com/"><img class="img" alt="" src="ex2"/></a>
        <a href="https://google.com/"><img class="img" alt="" src="ex3"/></a>
</div>

URL: http://example.samileier.com

基本上，我希望图像每隔 4 秒左右淡入另一个图像，但我也希望它们可以点击 link 转到其他网站。

Answer 1

我认为您需要专注于淡化 'a' 标签而不是 'img'。我稍微修改了你的代码。

<script>
    $(function () {
        $('.fadein a:gt(0)').hide();
        setInterval(function () {
        $('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');
        }, 4000);
    });
</script>
<style>
    body {
        background-color: black;
    }
    .image-container {
        width: 20%;
        margin-left: 42%;
    }
    .fadein {
        position: relative;
    }
    .fadein a {
        display: block;
    }
    .fadein img {
        top: 0;
        position: absolute;
        width: 20%;
        margin-left: 40%;
    }
</style>

使用 jQuery 的自动可点击图片库，第一张图片淡入淡出 in/out 但其他图片不淡入？

Automatic clickable image gallery using jQuery, first image fades in/out but the others don't fade in?

html

javascript

css

image

gallery