Nivo滑块转换无法正常工作

Question

我在wordpress主题中使用了nivo滑块jQuery插件（这是正确的，我使用的是jQuery插件，而不是WordPress插件），无论出于何种原因，图像转换都是可怕的。

就像，它们是缓慢且波涛汹涌的，你会看到过渡效果，直到图像再次变化。这就是我的意思：

这是我的jQuery代码

jQuery(document).ready(function() {  

    var logo_width = jQuery('.logo a img').width();
    jQuery('.logo').width(logo_width);

    jQuery('#cycler').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 6, // For box animations
        boxRows: 2, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation

        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav

        manualAdvance: false, // Force manual transitions
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
    });
});

Answer 1

嗯，你的代码没有明显的错误 - 除了你使用jQuery(document).ready(function() {的事实

这可能是问题，document.ready（）将在下载所有图像之前运行，因此您在图像仍在下载时正在运行滑块过渡（可能）。

我会改用jQuery(window).load(function() {。

此外，您的参数列表末尾有一个尾随逗号。 Thsi不会导致缓慢的问题，但它会导致它在IE7中失败（如果这对你来说是个问题）。

Answer 2

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

实施例： 的从

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

Answer 3

我来这里的派对很晚，但我遇到了同样的问题，并设法对其进行排序。

事实证明它与切片设置有关。注意你的切片如何设置为15并且“转换”中有15个段如果将切片设置为1，则应该可以对此进行排序。

我花了很多时间来解决发生在我身上的事情。