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

回答

相關問題