Question

我正在使用基于此处给出的代码的jquery创建幻灯片 - http://snook.ca/archives/javascript/simplest-jquery-slideshow

这是示例代码：

<html>
<head>
<style>
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});



</script>
</head>
<body>
<div class="fadein">
  <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
  <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
  <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
<a href="#"><img id="try" src="http://freeimagesarchive.com/data/media/29/12_sky.jpg" /></a>
</body>
</html>

我想要的是，当我用id尝试将鼠标悬停在图像上时，幻灯片应隐藏一段时间并显示静态图像并在几分钟后重新获得幻灯片。我是jquery的新手，有人可以帮助我吗？感谢名单..

Answer 1

如果我理解你的要求，

这个fiddle有解决方案。

我刚刚为图片元素try添加了两个事件监听器（mousenter，mouseleave），并使用了2个变量来跟踪悬停状态＆amp;幻灯片放映图片来源。

var tryHovered = false;
var actualSrc = '';
$('.fadein img:gt(0)').hide();
setInterval(function() {
if(!tryHovered){
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}
}, 3000);



$('#try').mouseenter(function(e) {
     tryHovered = true;
     actualSrc = $('.fadein :first-child').attr('src');
    $('.fadein :first-child').attr('src', this.src);//Replace this.src with any other static image path that you want to display.
}).mouseleave(function(e) {
     tryHovered = false;
     $('.fadein :first-child').attr('src', actualSrc);
});

Answer 2

使用jQuery .delay()，你可以隐藏整个.fadein div，无论你想要多少秒。

jsFiddle solution

鼠标悬停时隐藏div

2 个答案: