nivo滑塊溢出問題

我正在爲我的網頁使用nivoslider。圖像看起來一個接一個地溢出，直到頁面完全加載。這是我使用的CSS。我已嘗試overflow:hidden屬性。但它沒有得到糾正。我該如何糾正？nivo滑塊溢出問題

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>

來源

2012-01-02 designersvsoft

也許看看HTML將是有益的？ – 2012-01-02 11:26:23

請參閱我編輯的查詢。 – designersvsoft 2012-01-02 11:28:27

指定高度#slider並添加overflow:hidden它

這將完全解決它

來源

2012-01-02 11:44:48

太好了。非常感謝你。它完美的作品。 – designersvsoft 2012-01-02 11:49:32

歡迎您 – 2012-01-02 11:51:31

出現這種情況主要是在連接速度較慢，也沒有辦法處理這個問題。

但是，您可以做的是在頁面完全加載後調用nivo滑塊功能。只需使用window.onLoad屬性並調用其中的nivo函數即可。

像下面

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

來源

2012-01-02 11:30:14

nivo滑塊溢出問題

回答

相關問題