HTML中的幻灯片切换

Question

我有html如下：

<div id="#l0">
<img src="img.jpg" />
<img src="img.jpg" />
<div id="#p0" style="display:none">
    <div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;">
        test
    </div>
    <div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;">
        test
    </div>
    <div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;">
       test
    </div>
</div>
<div id="#p1" style="display:none">
    <div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;">
        test1
    </div>
    <div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;">
        test1
    </div>
    <div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;">
       test1
    </div>
</div>
<div id="#p2" style="display:none">
    <div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;">
        test2
    </div>
    <div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;">
        test2
    </div>
    <div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;">
       test2
    </div>
</div>
<img src="img1.jpg" />

现在逐一显示内容。例如，第一个图像然后是下一个图像，nect p0 div，p1 div，p2 div然后是图像。

这是动态意味着这不是确切的。有时div会出现，图像会出现在div之后。

那么，我如何为此提供幻灯片效果？

我在下面试过但没有工作

if (!($toSlide.hasClass("active")))
{

    $fromSlide.animate({"left":"-100%"},500,'linear')
    $toSlide.animate({"left":"0%"},500,'linear',function()
    {    
      $fromSlide.css("left","100%");
      $fromSlide.removeClass("active");  
      $toSlide.addClass("active");     
    });

}