悬停在下一个/上一个上时 jQuery 循环暂停

Question

我是 jquery 周期的新手，所以如果这只是一个愚蠢的问题，我提前道歉。我在我的网站上设置了幻灯片，一切正常。但是...当我将鼠标悬停在 图像 上时，我的幻灯片设置为暂停，而我真正想要的是在将鼠标悬停在“下一个”或“上一个”按钮上时暂停。我猜这是非常基本的，但我已经搜索了所有内容并找不到答案。

这是我目前正在使用的代码：

jQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#s2').cycle({ 
fx: 'fade', 
speed: 800,
timeout: 4000, 
next: '#next2', 
prev: '#prev2',
after: onAfter,
fastOnEvent: true,
pause: 1 
});
});
function onAfter(curr,next,opts) {
var caption = 'Photo ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}
</script>

相关 HTML：

<div id="s2" class="pics">
<a href="coral_natural_stone_1lg.jpg"><img src="coral_natural_stone_1.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" /></a>
<img src="coral_natural_stone_2.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_3.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_4.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_5.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_6.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_7.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
</div>

<p id="caption"></p>

<div class="nav"><a id="prev2" href="#"><img src="prevbttn.jpg" width="30" height="30" alt="previous" /></a><img src="spacer.gif" width="10" height="10" alt="spacer" /><a id="next2" href="#"><img src="nextbttn.jpg" width="30" height="30" alt="next" /></a></div>

以及相关的 CSS：

.pics {  
width:   1000px;  
height:  450px;  
padding: 0;  
margin:  0;  
} 

.pics img {  
padding: 0px;  
border:  none;  
background-color: #ffffff;  
height:  450px;  
width:   1000px;  
top:  0; 
left: 0;
}

#caption {
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
color:#2769b5;
}

任何人可以提供的任何帮助都将比您想象的更受欢迎。我知道这可能是一件简单的事情，但老实说，我已经用尽了我的资源（以及大约 15 页的谷歌搜索结果！）。提前感谢您提供的任何帮助。

特蕾莎

添加于 1/13：

修改了我的代码，如下所述，但仍然无法正常工作（下面的 jsfiddle 完美运行，正是我正在寻找的，但即使直接复制/粘贴也无法正常工作）。很明显，我敢肯定，但在挣扎。这是我修改后的 js 代码和标题中的相关信息（html 和 css 保持不变）：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#s2').cycle({ 
fx: 'fade', 
speed: 800,
timeout: 4000, 
next: '#next2', 
prev: '#prev2',
after: onAfter,
fastOnEvent: true
});
});
function onAfter(curr,next,opts) {
var caption = 'Photo ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}

$('#next2, #prev2').hover( 
function() { 
    $('#s2').cycle('pause'); 
}, 
function() { 
    $('#s2').cycle('resume'); 
} 
);

</script>

Answer 1

首先，从选项中删除pause: 1 - 这就是导致它在图像悬停时暂停的原因。那么：

要暂停，您可以使用：

$('#s2').cycle('pause')

要恢复，您可以使用：

$('#s2').cycle('resume')

这段代码应该可以实现你想要做的事情：

$('#next2, #prev2').hover( 
    function() { 
        $('#s2').cycle('pause'); 
    }, 
    function() { 
        $('#s2').cycle('resume'); 
    } 
);

Answer 2

对于在鼠标悬停时暂停的循环 2，您只需添加：

...
data-cycle-pause-on-hover: "#s2",
...