jQuery的與圖像滑動

Question

我有這些代碼：

代碼1：

<DIV id="Container"> 
<!-- PICTURE 1 BEGIN --> 
<DIV class="Container1"> 
<DIV class="Picture1"> 
<IMG src="/Folder/1.jpg" vSpace="0" hSpace="0" style="WIDTH: 100%; HEIGHT: Auto"> 
<FONT class="Picture1Text"> 
<SPAN> 
<SPAN class="Picture1Text-Up">Exclusive</SPAN><BR> 
<SPAN class="Picture1Text-Down">News</SPAN> 
</SPAN> 
</FONT> 
</DIV> 
</DIV> 
<!-- PICTURE 1 END --> 
<!-- PICTURE 2 BEGIN --> 
<DIV class="Container2"> 
<DIV class="Picture2"> 
<IMG src="/Folder/2.jpg" vSpace="0" hSpace="0" style="WIDTH: 100%; HEIGHT: Auto"> 
<FONT class="Picture2Text"> 
<SPAN> 
<SPAN class="Picture2Text-Up">Exclusive</SPAN><BR> 
<SPAN class="Picture2Text-Down">Pictures</SPAN> 
</SPAN> 
</FONT> 
</DIV> 
</DIV> 
<!-- PICTURE 2 END --> 
</DIV> 

代碼2：

$("#Container > div:gt(0)").hide(); 
setInterval(function() 
{ 
    $("#Container > div:first") 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .next() 
    .appendTo("#Container"); 
}, 3331); 

如何實現滑動/內部的這些2張圖片的交叉衰落主容器？或者，如果您有任何其他autoslide解決方案，我將不勝感激。 HTTP：// kenwheeler

Answer 1

，除非你真的想重塑你能給光滑滑塊一試的車輪，你可以試試這個

$("#Container > div[class^='Container']:not(:first)").hide(); 
    var i= 2; 
    setInterval(function() 
    { 
     $("#Container > div[class^='Container']:visible").fadeOut(1000); 
     $("#Container > div[class^='Container']:nth-child(" + i +")").fadeIn(1000); 
     if(i == $("#Container > div[class^='Container']").length){ 
     i= 1; 
     }else{ 
     i++; 
     } 
    }, 3331); 

另一個效果

$("#Container > div[class^='Container']:not(:first)").hide(); 
    var i= 2; 
    setInterval(function() 
    { 
     $("#Container > div[class^='Container']:visible").slideUp(1000); 
     $("#Container > div[class^='Container']:nth-child(" + i +")").slideDown(1000); 
     if(i == $("#Container > div[class^='Container']").length){ 
     i= 1; 
     }else{ 
     i++; 
     } 
    }, 3331); 

DEMO