1
画像をフェードインさせ、下のコードを使用しないようにするにはどうすればよいですか？私はそれに何を追加しますか？ 事前にお答えいただき、ありがとうございます。fadeOut、fadeIn、stop
HTML：
<div class="fadeImg" >
<img src="images/25sprout.jpg">
<img style="display:none;" src="images/alex.jpg">
<img style="display:none;" src="images/thundersha.jpg">
<img style="display:none;" src="images/cathy.jpg">
<img style="display:none;" src="images/david.jpg">
</div>
はJQuery：それは手段として
function nextFadeIn() {
if ($current >= $imgNum) return;
//make image fade in and fade out at one time, without splash vsual;
純粋主義者はこれを好まないかもしれませんが：
<script type="text/javascript" src="js/package/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$next = 1; // fixed, please do not modfy;
$current = 0; // fixed, please do not modfy;
$interval = 4000; // You can set single picture show time;
$fadeTime = 800; // You can set fadeing-transition time;
$imgNum = 5; // How many pictures do you have
$(document).ready(function(){
//NOTE : Div Wrapper should with css: relative;
//NOTE : img should with css: absolute;
//NOTE : img Width & Height can change by you;
$('.fadeImg').css('position','relative');
$('.fadeImg img').css({'position':'absolute','width':'332px','height':'500px'});
nextFadeIn();
});
function nextFadeIn(){
//make image fade in and fade out at one time, without splash vsual;
$('.fadeImg img').eq($current).delay($interval).fadeOut($fadeTime)
.end().eq($next).delay($interval).hide().fadeIn($fadeTime, nextFadeIn);
// if You have 5 images, then (eq) range is 0~4
// so we should reset to 0 when value > 4;
if($next < $imgNum-1){ $next++; } else { $next = 0;}
if($current < $imgNum-1){ $current++; } else { $current =0; }
};
</script>
これをコードにコピーして貼り付け、* fadeImg *という名前をクラスの名前であるtopHeroImage *に変更しました。私も5つではない2つの画像を使用しているので、$ imgNum = 2を変更しました。私は非常に私は学んでいるjavascriptに新しいです。私はそこに.stopを追加する方法があることを知っている、私はちょうどそれがループを停止するようにどこに知りません。 –
お客様の記載された要件は、コードと一致するようには見えません。 '$（"＃id "）。fadeIn（）;'を実行してください。おそらく、あなたは何をしようとしているのか、そしてこのプラグインが単純なコードよりもむしろそれを解決すると思う理由を説明することができます。 –
ここに私がコーディングしているものがあります：http://assets.daddario.com/landing_calftone/calftone_landing.html先頭のヘッダーイメージにはループするpngがあります。私はjavascriptやjqueryを書く方法を知らないので、25sproutLabでこれを見つけました。最初のpngを開始してから次のpngにフェードするまではすごくうまくいっていますが、2番目のイメージで停止してループするのではなく停止する方法はわかりません。完全なコードを書く方法がわからない私はこれで新しいです。私はあなたと一緒にそれを試してみていただきありがとうございます。 @ freedom-m –