Javascript 如何创建没有绝对位置的简单jQuery图像滑块

我正在寻找一种方法来创建一个非常简单的图像滑块使用jQuery动画淡入过渡。不需要按钮、数字或图例

我发现了这个——还有一些其他的——但问题是它们都要求图像处于“位置：绝对”状态，当我这样做时，我的整个布局都崩溃了

有没有什么方法可以不用在图像上使用绝对定位就可以做到这一点

这是我使用的原始代码：

$（函数（）{
$（'.fadein img:gt（0）'）.hide（）；
setInterval（函数（）{
$（'.fadein:first child'）.fadeOut（）
.next（'img'）.fadeIn（）
.end（）.appendTo（'.fadein'）；}，
3000);
});
.fadein{位置：相对；宽度：500px；高度：332px；}
.fadein img{位置：绝对；左侧：0；顶部：0；}
您可以使用css思考供应商前缀或使用prefixfree


.fadein{
位置：相对位置；
宽度：500px；
高度：332px；
背景尺寸：封面；
-webkit动画：滑块6s无限交替
}
@-webkit关键帧滑块{
从{
背景：url(http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg)
}
50%{
背景：url(http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg)
}
到{
背景：url(http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg)
}
}
变量i=-1；
var图像=[]；
图像[0]=“fingers.jpg”；
图片[1]=“tmrw.jpg”；
图像[2]=“cycle.jpg”；
函数更改img（）{
时间=3000；
如果（i如果（我）要解决的问题是“你的布局为什么会崩溃？”@bondythegreat请检查一下，我刚刚在帖子中加入了我的原始代码。我怎样才能让它对图像而不是三个图像起作用呢？谢谢。@LeandroFaria刚刚将%tage设置为
从{}25%{50%{75%{}到{}
然后您需要调整
动画：滑块6s无限交替
其中6是您将更改的几乎可以工作的值。这里唯一的问题是，我的图像不能有固定的宽度/高度。我需要图像的宽度：80%和高度：自动-因此布局保持响应。
 var i= -1;
       var images = [];
       images[0] = "fingers.jpg";
       images[1] = "tmrw.jpg";
       images[2] = "cycle.jpg";

    function changeImg(){
         time = 3000;            
        if(i < images.length - 1)
        {
          i++; 
        }
        else 
        { 
         i = 0;
        }
         setTimeout("changeImg()", time);
         document.slide.src = images[i];

    }     
    window.onload=changeImg;

       function prev()
        {
           i = i-1;
          if ( i < images.length )
          {
            if ( i == -1 )
            {
                i = 2;
            }
          }
          document.slide.src = images[i];
        }

        function next()
        {
          i = i +1;

         if ( i <= images.length  )
         {
            if ( i == images.length )
            {
                i = 0;
            }
         }
            document.slide.src = images[i];
        }