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页的谷歌搜索结果！）。提前感谢您提供的任何帮助。

特雷莎

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

for cycle2在悬停时暂停，你只需添加：

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

悬停在next / prev上的jQuery循环暂停

2 个答案: