は、私がここに与えられたコードに基づいてjqueryのを使用してスライドショーを作成していますマウスオーバー

上のdivを非表示にする - http://snook.ca/archives/javascript/simplest-jquery-slideshow は、私がここに与えられたコードに基づいてjqueryのを使用してスライドショーを作成していますマウスオーバー

これはサンプルコードです：私が欲しいもの

<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でかなり初心者です。ありがとう..

出典

2012-03-07 sachin11

他人にコードを書くように頼むのは不公平だと思います。典型的には、研究に時間を費やしても解決できなかった問題を人々がここに来ます。 –

は実際に私は、コードのビットに手を染めたが、それは、私はちょうどfine..I'llは今後心の中で自分の考えを維持働いていた部分を貼り付けたので、働いていませんでした。.. :) – sachin11

私が正しくあなたの条件を理解している場合、

このfiddleは解決策を持っています。

私はちょうど画像要素tryための2つのイベントリスナー（mousenter、mouseleave）を添加し、ホバー状態&スライドショー画像ソースを追跡するために2つの変数を使用します。あなたが欲しいしかし、多くの秒全体.fadeinのdivを非表示にすることができます.delay()のjQueryを使用して

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); 
});

出典

2012-03-07 17:26:00

ありがとうねえ、これはかなりあるもの私は次のように私は今も画像フェードインすることができた:)を探していました： '$（ '＃トライ'）のMouseEnter（関数（E）{ tryHovered =が真; はactualSrc = $（」フェードイン：。。初段子供 '）のattr（' SRC '）; $（' フェードイン：第一子 '）非表示（）; $（' フェードイン：。。最初の子供。）のattr（ 'SRC」、this.src ）;tryHovered = false; $（ '。fadein：first-child'）。hide（）; $（ '。フェイディン：ファーストチャイルド'）.attr（' src '、actualSrc）.fadeIn（1000）; }）; ' – sachin11

私はそれがうまくいったことを嬉しく思っています:) –

。

jsFiddle solution

出典

2012-03-07 17:31:38 bdparrish

は、私がここに与えられたコードに基づいてjqueryのを使用してスライドショーを作成していますマウスオーバー

答えて

関連する問題