我试图用这些图像制作一个自动幻灯片,每当我尝试这个时,它都会卡在第一张图像上。http://jsfiddle.net/He9AV/5/
HTML:
<div id="slideshow">
<a href="../images/food/e_chicken_quesa.jpg" target="_blank"><img class="show" src="../images/food/chicken_quesa.jpg" alt="Chicken Quesadilla" title="Chicken Quesadilla"></a>
<a href="../images/food/e_steak.jpg" target="_blank"><img src="../images/food/steak.jpg" alt="Beef Tenderloin" title="Beef Tenderloin"></a>
<a href="../images/food/e_pasta_display.jpg" target="_blank"><img src="../images/food/pasta_display.jpg" alt="Pasta Station" title="Pasta Station"></a>
<a href="../images/food/e_salmon.jpg" target="_blank"><img src="../images/food/salmon.jpg" alt="Salmon Filet" title="Salmon Filet"></a>
<a href="../images/food/e_panacotta.jpg" target="_blank"><img src="../images/food/panacotta.jpg" alt="Panacotta" title="Panacotta"></a>
<a href="../images/food/e_beet_salad.jpg" target="_blank"><img src="../images/food/beet_salad.jpg" alt="Beet Salad" title="Beet Salad"></a>
<a href="../images/food/e_tuna.jpg" target="_blank"><img src="../images/food/tuna.jpg" alt="Seared Tuna" title="Seared Tuna"></a>
<a href="../images/food/e_foi_gras.jpg" target="_blank"><img src="../images/food/foi_gras.jpg" alt="Foi Gras" title="Foi Gras"></a>
</div>
我不确定错误发生在哪里,但这里是
Javascript:
<script type="text/javascript">
var hovering = false;
var slideshow = $("#slideshow");
slideshow.mouseenter(function() {
hovering = true;
}).mouseleave(function() {
hovering = false;
slideShow();
});
function slideShow() {
if (!hovering) {
var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first");
var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first");
currentImg.delay(1000).fadeOut(500, function() {
nextImg.fadeIn(500, function() {
setTimeout(slideShow, 1000);
});
});
}
}
$(document).ready(function() {
slideShow();
});
</script>