使用href时会显示图像

Image dissapears when using a href

本文关键字：显示图 图像 显示 href 使用      更新时间：2023-09-26

JS

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

HTML

<div class="fadein"> 
<img src="IMG 1..">
<img src="IMG 2..">
/div>

这很好，但当我添加时

<a href="LINK" target="_blank"><img src="IMG 3..."></a>

IMG 3…不知什么原因消失了？有人能解释一下原因并为我提供解决方案吗？

看看我的小提琴。

问题是

$('.fadein :first-child')

采用所有:first-child节点，这也是您的IMG3节点（它是a元素的第一个子节点）。为了解决这个问题，我添加了一个直接的子选择器>，从而使它看起来像：

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

请注意，第一个选择器也与初始选择器不同，因为否则会显示a元素，但不会显示任何内容，因为img元素被第二行隐藏。

您需要关闭</div>（缺少"<"）

相关文章：