0

私は jQuery の初心者で、現在、小さな Web サイトを作成している学校のプロジェクトに取り組んでいます。このプロジェクトは、基本的なレベルで jQuery を独立して理解して使用できることを示すためのものなので、プラグインを使用することは許可されていないと思います。

とにかく、( Snook の "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();
});
4

1 に答える 1

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

$('#gallery').mouseenter(function(){
    $('#caption').show();
});
于 2013-03-19T10:58:36.073 に答える