使用jQuery幻灯片，如何使用mouseenter/hover显示字幕？

我对jQuery相当陌生，现在我正在开展一个学校项目，我正在制作一个小型网站。我不认为我们被允许使用任何插件，因为这个项目是关于显示我们可以在基本级别独立理解和使用jQuery。使用jQuery幻灯片，如何使用mouseenter/hover显示字幕？

无论如何，我管理（在Snook's "Simplest jQuery Slideshow" Tutorial的帮助下）创建一个简单的幻灯片。

现在我想添加一些功能到这个幻灯片。我想以某种方式使用字幕，例如在悬停或鼠标滑入时显示字幕。我尝试过搜索和测试各种各样的东西，但是我猜测我还没有足够的经验来找到解决方案。 “适应代码到另一个上下文”，就像找到一些可能也适用于我一样，我仍然觉得有点困难。

因此，如果我想要在悬停图像时显示某种标题，最好的解决方案是什么？我很开明，只要代码不太复杂。

这里是HTML：

一些文字。

<div id="gallery"> 
    <img src="img/gallery0.jpg" /> 
    <img src="img/gallery1.jpg" /> 
    <img src="img/gallery2.jpg" /> 
    <img src="img/gallery3.jpg" /> 
    <img src="img/gallery4.jpg" /> 
</div>

而jQuery的：

$('#gallery img:gt(0)').hide(); //Hiding all but the first img 

setInterval(function() { 
    $('#gallery :first-child').fadeOut().next('img').fadeIn().end().appendTo('#gallery'); 
//Fade out first image, fade in the next and add the first image to the end of #gallery 
}, 4000);

怎么看这个幻灯片作品，这是我JSFiddle。

我一定是一直生活在某种梦想中，想着这件事情会起作用;

$('#caption').hide(); 
$('#gallery').mouseenter(function(){ 
    $('#caption').show(); 
});

来源

2013-03-19 mizuki

$('#caption').show(); you missed '$' 

$('#gallery').mouseenter(function(){ 
    $('#caption').show(); 
});

来源

2013-03-19 10:58:36 sasi

哦，错字。即使使用$，它仍然无法正常工作。 – mizuki 2013-03-19 11:01:39

@Erika你可以提供你的小提琴.. – sasi 2013-03-19 11:18:49

http://jsfiddle.net/8tkEM/ 刚刚添加了2个随机图像，所以你可以看到它是如何工作的。 – mizuki 2013-03-19 11:30:26

使用jQuery幻灯片，如何使用mouseenter/hover显示字幕？

回答

相关问题