Question

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 ......出于某种原因消失了？谁能解释为什么并为我提供解决方案？

Answer 1

请参阅my fiddle。

问题在于

$('.fadein :first-child')

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

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

请注意，第一个选择器也从最初开始发生了变化，否则将显示您的a元素，但它不会显示任何内容，因为img元素被第二个隐藏线。

Answer 2

您需要关闭</div>（＆＃34;＆lt;＆＃34;缺失）

使用href时图像消失

2 个答案: