带有图像滑动的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);

如何在主容器中实现这两张图片的滑动/淡入淡出？或者，如果您有任何其他自动滑动解决方案，我将不胜感激。

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