javascript - 如何仅显示一张图像并将其居中放置在滑块中？

Question

我正在使用iosslider，但似乎不能一次在滑块中只显示一张图像。我也试图将显示的单个图像居中。这是我的 HTML：

HTML：

<div class = 'iosSlider'>
    <div class = 'slider'>
        <div class="item">
            <img src="/images/nature1.png" />
        </div>
        <div class="item">
            <img src="/images/nature2.png" />
        </div>
    </div>
</div>

我的 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;  
}

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

知道如何用我的 CSS 做到这一点吗？

尝试调整窗口大小，您会看到我的问题。我在具有 320x480 分辨率的移动网页上运行它。

Answer 1

将图像宽度/高度设置为 100%，您也可以绝对定位它们：

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

Answer 2

好的，请在此处使用 javascript 或 jQuery 循环浏览您的图像集。现在，当 jQuery 函数选择它时，将另一个类添加到居中或聚焦的图像中<div class = 'iosSlider'> <div class = 'slider'> <div class="item current"> <img src="/images/nature1.png" /> </div> <div class="item"> <img src="/images/nature2.png" /> </div> </div> </div>

并且当下一张图像获得焦点时，从第一张图像中删除此类“当前”并应用于第二张，依此类推。并为此类当前的链接allign: center; margin-left:auto; margin-right:auto;和其他必要的 css 编写 css。