Question

下面的代码非常适合滑块从一幅图像移动到下一幅图像。

<script type="text/javascript">
    $('#slider').cycle({
        fx: 'shuffle',
        speed: 'fast',
        timeout: 3000,
        next:   '#next',
        prev:   '#prev'
    });
    $('#pause').click(function() {
        $('#slider').cycle('pause');
    });
</script>

HTML：

<div id="wrapper">
    <div id="container">
        <div class="controller" id="prev"></div>
        <div class="controller" id="pause"></div>
        <div id="slider">
            <img src="~/XImages/18wheeler.jpg" width="660" height="420" alt="Flight 1">
            <img src="~/XImages/2.jpg" width="660" height="420" alt="Flight 1">
            <img src="~/XImages/3.jpg" width="660" height="420" alt="Flight 1">
        <div class="controller" id="next"></div> 
        </div>
</div>

我不知何故无法暂停滑块。代码不会在浏览器中引发任何错误。有人可以指导。

谢谢

Answer 1

看起来暂停控制器上的click事件未绑定。首先，找出bind在起作用

$('#pause').click(function() {
    console.log("Working!");
    $('#slider').cycle('pause');
});

如果没有，请确保在HTML渲染后声明脚本。

Answer 2

工作正常。另外，您可以使用here中提到的toggle。

$(function(){

 $('#slider').cycle({
        fx: 'shuffle',
        speed: 'fast',
        timeout: 3000,
        next:   '#next',
        prev:   '#prev'
    });
    $('#pause').click(function(e) {    
     $('#slider').cycle('toggle'); 
     
     $(this).text($(this).text() == "pause" ? "play" : "pause")
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.js"></script>
<div id="wrapper">
    <div id="container">
        <div class="controller" id="prev">prev</div>
        <div class="controller" id="pause">pause</div>
        <div id="slider">
            <img width="100" height="100" alt="Flight 1" title="Flight 1">
            <img width="100" height="100" alt="Flight 1" title="Flight 2">
            <img width="100" height="100" alt="Flight 1" title="Flight 3">
        <div class="controller" id="next">next</div> 
        </div>
</div>

Answer 3

第一个问题是未能触发Click的{{1}}事件。因此，在渲染HTML之后声明脚本可以解决以下问题：

#pause

第二个问题<div id="wrapper"> <div id="container"> <div class="controller" id="prev"></div> <div class="controller" id="pause"></div> <div id="slider"> <img src="~/XImages/18wheeler.jpg" width="660" height="420" alt="Flight 1"> <img src="~/XImages/2.jpg" width="660" height="420" alt="Flight 1"> <img src="~/XImages/3.jpg" width="660" height="420" alt="Flight 1"> <div class="controller" id="next"></div> </div> </div> <script type="text/javascript"> jQuery(function($){ $('#slider').cycle({ fx: 'fade', speed: 'fast', timeout: 3000, next: '#next', prev: '#prev' }); $('#pause').click(function () { console.log("Working!"); $('#slider').cycle('toggle'); }) }); </script>是由于此处说明的库中的冲突引起的：

https://stackoverflow.com/a/45739571/9934620

，并且上述代码中的冲突问题也已成功解决。

希望有帮助。

jQuery Cycle插件暂停问题

3 个答案: