我的横幅图像不会改变我在 jQuery 脚本中设置的速度和时间的横幅

Posted 2023-05-09

【中文标题】我的横幅图像不会改变我在 jQuery 脚本中设置的速度和时间的横幅

【英文标题】：my banner images do not change banner in speed and dalay that I set in jQuery script

【发布时间】：2014-09-27 03:21:06

【问题描述】：

我正在使用 unslider 来显示包含许多图像的滑块。

我已经有插件工作正常，但是，我不明白为什么，我的延迟和速度选项不能正常工作。

我希望我的横幅图片每 7 秒更改一次，并且我希望延迟 3 秒。所以我将速度设置为 7000（毫秒）并延迟 3000。但不起作用。我没有得到我在 jQuery 脚本中设置的速度和延迟。

有人可以帮助我了解这里发生的事情吗？

我的例子有这个问题：http://jsfiddle.net/bdmU4/3/

下面是我的 jQuery 启动 unslider 插件：

$(function ()  
$('.banner').unslider(
    speed: 3000,               //  The speed to animate each slide (in milliseconds)
    delay: 7000,              //  The delay between slide animations (in milliseconds)
    complete: function() ,  //  A function that gets called after every slide animation
    keys: true,               //  Enable keyboard (left, right) arrow shortcuts
    dots: true,               //  Display dot navigation
    fluid: false              //  Support responsive design. May break non-responsive designs
);

这里有我的 html：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<section id="banner-container"> 
    <div class="banner">
        <ul>          
            <li style="background-color:blue; height:200px; "></li>
             <li style="background-color:red; height:200px; "></li>
            <li style="background-color:yellow; height:200px; "></li>
            <li style="background-color:green; height:200px; "></li>
        </ul>
    </div>
<a href="#" class="unslider-arrow prev">Previous Slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>
</section>

【参考方案1】：

在玩弄了你的小提琴之后（我将它简化为他们网站上的核心示例），看起来speed 没有从delay 中减去。

如果您想要 3 秒的转换时间加上 7 秒的完整显示时间，那么我会将您的 delay 更改为 10000。

此外，在您的小提琴中，您要声明滑块两次，这样可能会产生奇怪的效果。 var unslider = $('.banner').unslider(); 是第二次出现。

【讨论】：

感谢您的回答史蒂夫陶伯。但我使用第二个声明“var unslider = $('.banner').unslider();”通过单击箭头更改幻灯片。你知道如何在不两次声明滑块的情况下维护此代码吗？

是的，只需声明一次，然后使用变量。这是 jQueryUI 对话框的示例：var myDiag = jQuery('#dialog').dialog(); THEN 如果你想打开它：myDiag.dialog('open');.

感谢您的回答史蒂夫陶伯。但是像那样，我怎样才能设置我想要的速度和延迟？因为我在这里试图设置选项并且它不起作用......

您的初始声明返回一个unslider 对象。在您进行原始声明时将其存储起来。删除第二个声明，然后从第一个声明中引用变量。

Steve Tauber 感谢您的帮助，我现在有了这个小提琴：jsfiddle.net/bdmU4/6。而且我的箭头链接在 Internet Explorer 上不起作用。您知道为什么会发生这种情况吗？

【参考方案2】：

对不起，死灵贴， 我有同样的问题，无论我输入什么速度/延迟，它都不会影响它。

此外，如果我使用“点”更改幻灯片，幻灯片会跳回到它开始的位置，所有时间都会被丢弃。

我所做的只是删除该行：

var unslider = $('.banner').unslider();

正如史蒂夫指出的那样。 我认为调用脚本的第二次出现会覆盖事物，并且会混淆要遵循的速度，因为基本上有 2 个同时运行。

我在这里回复，希望它对将来的人有所帮助。