带有 nivo 滑块 jquery 的图像答案

【问题标题】：image with nivo slider jquery带有 nivo 滑块 jquery 的图像
【发布时间】：2013-10-28 06:49:49
【问题描述】：

我使用 nivo 滑块 jquery 模板来制作带有图片的立体模型。我的问题是它正确显示了第一个图像，然后第二个图像显示在第一个图像上，但垂直显示，宽度可能只有 40px。所以我同时有两张图片，第一张尺寸合适，第二张没有。你知道我要做什么吗？

这是我的代码的一部分：

<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>

【问题讨论】：

标签： jquery slider nivo-slider

【解决方案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;
}

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

【讨论】：