Question

我使用nivo滑块jquery模板制作带图片的diaporama。我的问题是它正确地显示了第一个图像，然后第二个图像显示在第一个图像上，但是垂直显示，可能只有40像素的宽度。所以我同时拥有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>

Answer 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;
}

这就是我添加到你的样式块中的所有内容，代码对我有用。希望这会有所帮助。

图像与nivo滑块jquery

1 个答案: