jquery交叉淡入结构化div元素

我已经按照

js如下所示：

setInterval(function () {
    $('#singleSlideshow #slideItem:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#singleSlideshow');
    }, 3000);

对于内容区域来说，这很好，只有一个元素需要淡入淡出，例如：

<div id="slideShow">
    <img src="www.pictures.com/somepic.png"/>        
    <img src="www.pictures.com/anotherpic.png"/>
    <img src="www.pictures.com/theonepic.png"/>
</div>

问题仍然是一样的-没有交叉淡入淡出效果，但只有一个淡入淡出动画。 有趣的是，原始版本只显示了新元素的fadeIn转换 相反，逆序版本仅显示当前元素的淡出过渡

因此，它总是以较高的索引显示元素的效果

---

我不知道如何解决这个问题……

假设我了解您的需求，您希望在同一页面上有两个幻灯片，时间/过渡时间不同，并且每个幻灯片都需要显示自己单独的混合内容（图像和/或其他div）

JSFIDLE演示

HTML:

<div id="slideshow1">
   <div>
       <div style="color:red;">Content in first child of slideshow1</div>
       <div style="color:blue;">More content in first child of slideshow1</div>
   </div>
   <div>
     Content in second child of slideshow1
   </div>
   <div>
     Content in third child of slideshow1
   </div>
</div>

<div id="slideshow2">
   <div>
       <div style="color:red;">Content in first child of SLIDSHOW2</div>
       <div style="color:blue;">More content in first child of SLIDESHOW2</div>
   </div>
   <div>
     Content in second child SLIDESHOW2
   </div>
   <div>
     Content in third child SLIDESHOW2
   </div>
</div>

$("#slideshow1 > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow1 > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow1');
},  3000);

$("#slideshow2 > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow2 > div:first')
    .fadeOut(2000)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#slideshow2');
},  4500);

#slideshow1 { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow1 > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

#slideshow2 { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow2 > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

CSS:

<div id="slideshow1">
   <div>
       <div style="color:red;">Content in first child of slideshow1</div>
       <div style="color:blue;">More content in first child of slideshow1</div>
   </div>
   <div>
     Content in second child of slideshow1
   </div>
   <div>
     Content in third child of slideshow1
   </div>
</div>

<div id="slideshow2">
   <div>
       <div style="color:red;">Content in first child of SLIDSHOW2</div>
       <div style="color:blue;">More content in first child of SLIDESHOW2</div>
   </div>
   <div>
     Content in second child SLIDESHOW2
   </div>
   <div>
     Content in third child SLIDESHOW2
   </div>
</div>

$("#slideshow1 > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow1 > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow1');
},  3000);

$("#slideshow2 > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow2 > div:first')
    .fadeOut(2000)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#slideshow2');
},  4500);

#slideshow1 { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow1 > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

#slideshow2 { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow2 > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

---

问题不在于在同一页上使用两个单独的幻灯片-问题在于，当一张幻灯片包含多于一个元素时，转换不会像预期的那样立即工作。不过它是用你的小提琴演奏的。。。稍后我会调查一下。但是现在，我使用了jquery循环插件。。。