我知道之前有人问过这个问题,但是该解决方案不符合我的要求。
HTML
<div id="slider" class="contentPanel">
<div class="content">
<img src="images/slide1.jpg" alt="aliyah creations">
</div>
<div class="content">
<img src="images/slide2.jpg" alt="aliyah creations">
</div>
<div class="content">
<img src="images/slide3.jpg" alt="aliyah creations">
</div>
</div>
JS
function fadeContent() {
$(".contentPanel .content:hidden:first").fadeIn(500).delay(5000).fadeOut(500, function() {
$(this).appendTo($(this).parent());
fadeContent();
});
};
fadeContent();
上面的代码可以正常工作,除非您滚动到页面底部,并且调用 fadeIn 时,它会自动将页面滚动到 div 的顶部。
以前的解决方案是设置 div 的固定高度,但是我希望站点根据用于查看它的屏幕分辨率做出响应。
这是CSS
#slider{
float:left;
height:auto;
width:100%;
border-style: none;
position:relative;
margin: 0px;
}
.content {
float:left;
max-height:400px;
width:100%;
background-color:black;
background-size: 50% auto;
text-align:center;
display: none;
}
.content img{
max-width:100%;
}
以下是该网站的链接
(删除链接)