[英]How to pause a slideshow by hovering over it
好的,我可以播放幻燈片,但是我不知道如何將鼠標懸停在圖像上。
Javascript:
<script type="text/javascript">
var hovering = false;
$('#slideshow').hover(function () { //not sure if #slideshow is the right thing to put here
hovering = true;
}, function () {
hovering = false;
slideShow();
});
$(document).ready(function(){
slideShow();
});
function slideShow() {
if(!hovering) {
var showing = $('#slideshow .show');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
var timer;
showing.fadeOut(500, function() { next.fadeIn(200).addClass('show'); }).removeClass('show');
setTimeout(slideShow, 3000);
}
}
</script>
HTML:
<div id="slideshow">
<img class="show" src="../images/food/chicken_quesa.jpg">
<img src="../images/food/beet_salad.jpg">
<img src="../images/food/pasta_display.jpg">
</div>
嘗試這樣:
$(document).ready(function() {
var timer;
$("#slideshow div").hide();
$("#slideshow")
// when mouse enters, clear the timer if it has been set
.mouseenter(function() {
if (timer) { clearInterval(timer) }
})
// when mouse goes out, start the slideshow
.mouseleave(function() {
timer = setInterval(function() {
$("#slideshow > div:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo("#slideshow");
}, 3000);
})
// trigger mouseleave for initial slideshow starting
.mouseleave();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.