jquery - 全宽图像不能放置在指定宽度和高度的一个固定位置

Question

我正在为首页制作淡入淡出的幻灯片。图像是全宽的。这是我的代码；

<div id="slider">
    <img src="<?=base_url()?>assets/display/photo/slider/dental_clinick.jpg" alt="dental clinick" title="dental clinick" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/hospital_staff.jpg" alt="Hospital Staff Mohmand Hospital" title="Hospital Staff Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/laboratory_test.jpg" alt="Laboratory Test Mohmand Hospital" title="Laboratory Test Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/operation_theater.jpg" alt="Operation Theator Mohmand Hospital" title="Operation Theator Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/operation_theator_staff.jpg" alt="Operation Theator Staff Mohmand Hospital" title="Operation Theator Staff Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/xray.jpg" alt="X-Ray Mohmand Hospital" title="X-Ray Mohmand Hospital" class="img"/>
</div>

这里是 jquery;

$('.img:gt(0)').hide();
setInterval(function(){
  $('.img:first-child').fadeOut()
     .next('.img').fadeIn(5000)
     .end().appendTo('#slider');}, 
  2000);

似乎图像被一个放在另一个下面。当下一张图片变成淡入淡出时，显示向下移动，下一张图片出来。如何解决这个问题？

Answer 1

#slider{position:relative;overflow:hidden}
#slider img{position:absolute;top:0;right:0}

这里有一个jsfiddle给你看:http://jsfiddle.net/kingmotley/PWvaP/2/这是另一个使用 img 标签而不是类的 jsfiddle，并且只在 slider 中隐藏 img:http://jsfiddle.net/kingmotley/PWvaP/3/