Jquery 全幅图像不能放置在指定宽度和高度的固定位置

我正在为头版制作淡入淡出的幻灯片。图像是全宽的。这是我的密码

<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>

似乎图像被一个接一个地放置。当下一个图像变为淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出。如何解决这个问题

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

下面是一个JSFIDLE供您查看：

---

下面是另一个使用img标记而不是类的jsfiddle，它只在滑块中隐藏img：

我们可以看到CSS吗？您可能想尝试图像的绝对定位。顺便说一句，您可以尝试flexslider，这是一个非常好的用于jQuery的滑块插件，它利用了CSS3转换（如果有的话）和其他功能。比如当你的幻灯片结束时会发生什么？标记导航点（或上一个/下一个）。能够在滑动和衰减、放松和响应之间切换。您可能还需要将高度/宽度强制设置在#滑块上，或者将未通过“显示：无”隐藏，但其上具有“可见性：隐藏”样式（或不透明度：0）的示例图像放入其中，该样式不是幻灯片的一部分，以保持正确的尺寸。我强制设置了#滑块（高度），但它仍然占用了所有图像的最大空间。假设我有六张幻灯片。因此，它需要所有六个图像的高度（显示滚动），但其他图像是隐藏的。如何修复其他图像问题，否则幻灯片效果良好。如果看到滚动条，则说明您没有正确应用上面的CSS<代码>溢出：隐藏的应该去掉滚动条，而

位置：相对的

和

位置：绝对的

东西会将所有图像呈现在彼此的顶部。它正在工作。但这对我不起作用。你能把我添加到skype上，让我告诉你这个问题吗。我的Skype是arif_Shariati我目前无法使用Skype，抱歉。

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