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

【问题标题】：Automatic clickable image gallery using jQuery, first image fades in/out but the others don't fade in?使用 jQuery 的自动可点击图片库，第一张图片淡入/淡出但其他图片不淡入？
【发布时间】：2019-08-03 08:26:39
【问题描述】：

我有一个赞助商徽标库，这些徽标设置为每 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 秒左右相互淡入，但我也希望它们成为指向其他网站的可点击链接。

【问题讨论】：

标签： javascript html css image gallery

【解决方案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>

【讨论】：