Question

我在我的网页上使用nivoslider。图像看起来一个接一个地溢出，直到页面完全加载。这是我正在使用的css。我尝试了overflow:hidden属性。但它没有得到纠正。我怎么能纠正这个？

CSS：

.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px; overflow:hidden;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:500px;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:none;
}
/* The slices in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    /*opacity:0.8;  Overridden by captionOpacity setting */
    width:100%;
    z-index:89;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

HTML：

<div id="slider">                 
    <img src="uploads/images/6431-45-york-st-kitchen-b.jpg" width="315" height="250" alt="" />                
    <img src="uploads/images/9931-45-york-st-front-a.jpg" width="315" height="250" alt="" />                  
    <img src="uploads/images/8931-45-york-st-bed-1a.jpg" width="315" height="250" alt="" /> 
    <img src="uploads/images/3931-45-york-st-bath-a.jpg" width="315" height="250" alt="" />
    <img src="uploads/images/4031-45-york-st-study-a.jpg" width="315" height="250" alt="" />   
    <img src="uploads/images/7531-45-york-st-kitchen-a.jpg" width="315" height="250" alt="" />    
    <img src="uploads/images/1931-45-york-st-living-b.jpg" width="315" height="250" alt="" />   
    <img src="uploads/images/5531-45-york-st-foyer-a.jpg" width="315" height="250" alt="" />
</div>

Answer 1

指定#slider的高度并将overflow:hidden添加到其中

这将完美地解决它

Answer 2

这主要发生在较慢的连接中，并且无法处理此问题。

但是，你可以做的是在页面完全加载后调用nivo滑块功能。只需使用window.onLoad属性并调用其中的nivo函数。

喜欢以下

<script>
    window.onload = init;
    function init() {
        /* call to your nivo function */
    }
</script>

nivo滑块溢出问题

2 个答案: