2

我正在尝试使用 nivo 滑块。我最初将它设置为“折叠”转换。它工作得很好。我将其更改为“淡入淡出”，现在当图像淡入下一个时，它似乎被推下。以前有人遇到过这个问题吗？这是jQuery和css。

    $(window).load(function() {
    $('#slider').nivoSlider({
    effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed:500, // Slide transition speed
    pauseTime:5000, // How long each slide will show
    startSlide:4, // Set starting Slide (0 index)

/Nevo Slider/

slider {

position:relative;
width:900px;
height:250px;
background:url(images/loading.gif) no-repeat 50% 50%;
margin-bottom: 20px;
}

slider img {

position:absolute;
top:0px;
left:0px;
display:none;
}

slider a {

border:0;
display:block;
} /End of Nevo Slider/

这是一个链接 http://kerrydean.ca/Grey%20River/greyRiverTemplate2.html

4

5 回答 5

3

我遇到了同样的问题，我在网上找到了一些技巧，但没有一个对我有用。这是为我解决问题的 CSS 规则：

div.nivo-slice { position:absolute; z-index: 99; top:0 }

我添加了 top:0 并将图像移动到位。此外，这种图像偏移问题似乎仅在使用“淡入淡出”功能时才会发生。

于 2012-01-06T19:23:56.513 回答
2

我有同样的问题，当我将主题默认类添加到 div#slider 时它解决了

<div id="slider" class="nivoSlider theme-default">

当然加载了 default.css

于 2012-05-04T14:47:59.610 回答
0

它在WordPress中吗？如果是这样，您将需要隐藏<p>自动添加的标签。添加这个CSS，这应该可以解决问题（至少它对我有用）：

.nivoSlider p { display: none; }
于 2012-06-14T21:02:13.623 回答
0

您需要删除幻灯片上所有对象标签包装的图像。

示例：从

<ul id="slider">
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
</ul>

至

<div id="slider">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>
于 2012-11-28T08:23:24.507 回答
0

您需要将该.nivoSlider类应用于包含图像的#slider id，此外，您还包含 jQuery 两次。

于 2011-07-21T20:59:32.337 回答