0

nivoスライダーのjqueryテンプレートを使用して、画像付きのスライドショーを作成します。私の問題は、最初の画像が正しく表示され、次に2番目の画像が最初の画像に表示されることですが、垂直方向では、おそらく40pxの幅で表示されます。だから私は同時に2つの画像を持っています。最初の画像は正しいサイズで、2番目の画像はありません。私がしなければならないことを知っていますか？

これは私のコードの一部です：

<style> 
.nivoSlider {
    position:relative;
    width:618px; /* Change this to your images width */
    height:246px; /* Change this to your images height */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>    
<div id="slider" class="nivoSlider">

    <img src="/template/images/custom/popup_imgtest.jpg" alt="" />
    <img src="/template/images/custom/popup_imgtest2.jpg" alt="" />
   </div>
4

1 に答える 1

1

あなたの問題は、nivoSliderが精巧な効果のために作成するスライスのスタイルが欠落していることだと思います。

これらは、nivoSliderをダウンロードしたときに取得するzipファイルに含まれています。

/* The slices and boxes in the Slider */
.nivo-slice {
   display:block;
   position:absolute;
   z-index:5;
   height:100%;
}

.nivo-box {
   display:block;
   position:absolute;
   z-index:5;
}

私があなたのスタイルブロックに追加したのはそれだけで、コードは私のために機能しました。お役に立てれば。

于 2012-04-04T01:33:52.587 に答える