使用jQuery的自动可点击图片库，第一个图片会淡入/淡出，而其他图片不会淡入吗？

Question

我有一个赞助商徽标画廊，该徽标设置为每4秒钟使用jQuery和CSS淡入下一张图片。 问题是单击这些图像时必须将它们链接到适当的网页。 当图片标签不在链接标签中时，代码可以正常工作，但是一旦您在图片周围添加了链接，第一个图片就会逐渐淡入，在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>

网址： http ： //example.samileier.com

基本上，我希望这些图像每隔4秒钟左右就会逐渐消失，但我也希望它们是可单击的指向其他网站的链接。

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>