Javascript 如何仅显示一个图像并将其置于滑块的中心？

我正在使用，但似乎不能一次只在滑块中显示一个图像。我还尝试将显示的单个图像居中。以下是我对HTML的理解：

HTML:

我基本上是试图在滑块中一次只显示一个居中的图像。下面是我目前看到的。如您所见，右侧的图像也显示出来

你知道我如何用CSS来实现这一点吗

尝试调整窗口大小，您将看到我的问题。我在一个分辨率为320x480的移动网页上运行这个

---

将图像的宽度/高度设置为100%，您还可以对其进行绝对定位：

 .iosSlider .slider .item img {
     width: 100%;
     height: 100%;
     position:absolute;
     top:0;
     left:0;
     border: solid 1px #00ff00;  
}

---

好的，做一件事，在这里使用javascript或jQuery来循环遍历您的图像集。 现在，当jQuery函数像

当下一张图像获得焦点时，从第一张图像中删除该类“current”，并应用于第二张图像，依此类推。 并为该类编写css当前liek

allign:center；左边距：自动；右边距：自动和其他必要的css

.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;

width: 100%;
height: 300px;

border: solid 1px #ff0000;
}

/* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}

/* slide */
.iosSlider .slider .slide {
/* required */
float: left;

width: 100%;
height: 100%;
}

.iosSlider .slider .item img {
width: auto;
height: 300px;

border: solid 1px #00ff00;  
}

 .iosSlider .slider .item img {
     width: 100%;
     height: 100%;
     position:absolute;
     top:0;
     left:0;
     border: solid 1px #00ff00;  
}