jQuery循环暂停悬停在下一个/ prev

我是jquery循环新手，所以如果这只是一个愚蠢的问题，我提前道歉。我在我的网站上设置了幻灯片，一切正常。但是......当我将鼠标悬停在“下一个”或“上一个”按钮上时，我想要暂停时，我的幻灯片会在悬停在图片上时暂停。我猜这是非常基本的，但我已经搜遍了，找不到答案。jQuery循环暂停悬停在下一个/ prev

这是我目前使用的代码：

的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>

来源

2012-01-08 Teresa Thayer

首先，从选项中删除pause: 1 - 这是什么原因呢暂停图像悬停。然后：

要暂停，你可以使用：

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

和恢复，您可以使用：

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

此代码应做到你希望做什么：

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

来源

2012-01-08 02:02:28 chrisn

我正在研究jsfiddle的例子，看到克里斯已经回答了。为了避免我添加新的答案，jsfiddle是[here]（http://jsfiddle.net/wUZC9/）。 – flynfish 2012-01-08 02:11:12

正是我想要它做的。你的jsfiddle完美地工作，很简单，很有道理。但是，它不适合我，我无法弄清楚我做错了什么。在js上直接复制/粘贴，并且所有的html和css都很直接且不变。花了最后两个小时试图弄清楚我做错了什么，我相信它可能会简单明了。我无法在此框中填入新编辑的代码，因此我将编辑上述问题并将其放置在那里。如果我得到它的工作，我会哭泣的欢乐的眼泪！任何帮助表示赞赏。 – 2012-01-13 21:33:53

_在文档“准备就绪”之前，您无法安全地操作页面。_我已经[从@flynfish更新了jsFiddle]（http://jsfiddle.net/wUZC9/1/）以反映正确的代码。 – chrisn 2012-01-13 21:56:29

for cycle2暂停悬停您只能添加：

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

来源

2014-08-20 08:21:59

jQuery循环暂停悬停在下一个/ prev

回答

相关问题