内容滑块内的图像重复

Question

我有一个跨越整个屏幕长度的内容滑块。我已将其宽度设置为 100%。问题是内容 div 中的图像正在重复。图片尺寸为600*300。该页面应与所有屏幕分辨率兼容。我该如何解决这个问题？

CSS 代码

#slider, #slider div.sliderInner {
width:100%;height:250px;/* Must be the same size as the slider images */}

#slider {
background:black url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);}

HTML 代码

<div id="slider">
<img src="images/image-slider-1.jpg" alt="" />
<img src="images/image-slider-2.jpg" alt="" />
<img src="images/image-slider-3.jpg" alt="" />
<img src="images/image-slider-4.jpg" alt="" />
<img src="images/image-slider-5.jpg" alt="" />
</div>

Answer 1

如果您使用 css 放置图像，请使用 background-repeate:no-repeat;

为您的每张图片使用 1 次潜水。喜欢

<div id="slider">

<div id="firstImg"><img src="" alt="" width="600" height="300" /></div>
<div id="secondImg"><img src="" alt="" width="600" height="300" /></div>
<div id="thirdImg"><img src="" alt="" width="600" height="300" /></div>
<div id="fourthImg"><img src="" alt="" width="600" height="300" /></div>
<div id="fifthImg"><img src="" alt="" width="600" height="300" /></div>

</div>

并为每个包含图像的 div 放置一些 id。请参阅我的更新示例。

CSS

#slider {
width: 100%;
position: relative;
}

#firstImg {
float: left;
width: auto;
}

#secondImg {
float: left;
width: auto;
}
#thirdImg {
    float: left;
    width: auto;
}

#fourthImg {
    float: left;
    width: auto;
}

#fifthImg {
    float: left;
    width: auto;
}