Nivo 滑块过渡无法正常工作答案

【问题标题】：Nivo slider transitions aren't working correctlyNivo 滑块过渡无法正常工作
【发布时间】：2016-05-27 05:04:23
【问题描述】：

我在我的 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
    });
});

【问题讨论】：

你能发布你的 HTML，你有任何 JavaScript 错误吗？仅使用 jQuery('#cycler').nivoSlider();你有奇怪的过渡吗？

标签： jquery wordpress nivo-slider

【解决方案1】：

嗯，你的代码没有什么明显的问题——除了你使用了jQuery(document).ready(function() {

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

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

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

【讨论】：

我不认为这是问题所在，他会看到完全不同的问题，而不是视觉错误。即他会看到所有这些都堆叠在一起（css问题）。
啊，好的，谢谢你的信息——这很奇怪，我从来没有过。我想知道是否还有其他脚本消耗资源并阻止动画流畅播放。

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

【讨论】：

【解决方案3】：

我在这里聚会很晚了，但我遇到了同样的问题并设法解决了。

原来它与切片设置有关。请注意您的切片如何设置为 15，并且“过渡”中有 15 个段如果您将切片设置为 1，您应该能够对其进行排序。

我花了很长时间才弄清楚它发生在我身上时发生了什么。

【讨论】：