jQueryフェード関数とsetInterval関数

-3

jQueryを使ってシンプルなスライドを作成しています。その作業はうまくいきません。次のコードでもフェード関数を使いたいだけです。私はフェード機能を使用していましたが、変化している間は画像がフェードアウトしていません。jQueryフェード関数とsetInterval関数

var mainImage = $('#mainImage'); 
var imageData = ['_images/gallery/beach_houses.jpg','_images/gallery/golden_gate.jpg','_images/gallery/red_rock_01.jpg']; 
var imageIndex = 0; 
function imageSlide(){ 
    mainImage.fadeIn("slow",function(){ 
     mainImage.attr("src",imageData[imageIndex]); 
     imageIndex++; 
     if(imageIndex >= imageData.length){ 
      imageIndex = 0; 
     } 
    }); 
} 
setInterval(imageSlide,1000);

出典

2017-11-20 Muhammad Hamza Nisar

予想される動作と実際の動作を指定してください。 "私はちょうどあなたが達成しようとしていることを説明していないフェード機能を使用したい"です。既に '.fadeIn'を使っているようです（間違っていますが）。 –

私はフェード機能を使用していますが、うまく動作していないので、私の友人が働いていない理由を教えてください。 –

初めてimageSlideが呼び出されると、*でフェードします。既に表示されている場合、これは何もしません。表示されていなくても、イメージがすでに表示された後に、「src」をフェードインして*変更します。これを試してみてください： 'mainImage.fadeOut（" slow "、function（）{$（this）.attr（" src "、imageData [imageIndex]）; $（this）.fadeIn（" slow "）}'修正も同様） –

をit.Good の画像が消えないようにするには、を隠す必要があります。最も簡単な方法は、を先ににフェードインすることです。フェードアウトのコールバックを使用して

、あなたが完了するのフェードアウトのを待つことができ、SRCを設定し、フェードイン：（で、その後フェードアウト）ので、2倍遅いがより長くなります"slow" = 600msのこと

var mainImage = $('#mainImage'); 
var imageData = ['_images/gallery/beach_houses.jpg','_images/gallery/golden_gate.jpg','_images/gallery/red_rock_01.jpg']; 
var imageIndex = 0; 
function imageSlide() { 

    // fade out before changing src 
    mainImage.fadeOut("fast", function(){ 
     mainImage.attr("src",imageData[imageIndex]); 
     imageIndex++; 
     if(imageIndex >= imageData.length){ 
      imageIndex = 0; 
     } 

     // fade back in after changing src 
     mainImage.fadeIn("slow"); 
    }); 
} 

// Increase interval to provide enough time if needed 
setInterval(imageSlide, 1000);

注意1000msのあなたのsetIntervalといくつかの狂った結果を作成します。

出典

2017-11-20 10:09:17

それでも '磨く' に持っているつもり生産目的below.Forコードを確認あなたは既にfadeInを使用しますが、順序できた幸運

var mainImage = $('#mainImage'); 
 
var imageData = ['https://www.maxcdn.com/blog/blog-assets/2016/01/firefox-subresource-integrity-error.png','https://www.typesettercms.com/data/_addondata/x_Addons/screenshots/5/245/thumbnail.png','https://cdn9.gaborszathmari.me/wp-content/uploads/2016/06/when-the-cdn-goes-bananas-cover.png']; 
 
var imageIndex = 0; 
 
function imageSlide(){ 
 
    mainImage.attr("src",imageData[imageIndex]).fadeIn(1000,function(){ 
 
     imageIndex++; 
 
     if(imageIndex >= imageData.length){ 
 
      imageIndex = 0; 
 
     } 
 
     setTimeout(function(){ 
 
      mainImage.fadeOut(1000,function(){ 
 
       imageSlide(); 
 
      }); 
 
     },1000); 
 
    }); 
 
} 
 
imageSlide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img style="display:none;" id="mainImage">

出典

2017-11-20 10:05:18

私のコードを参照してください3ステップは、これがあなたを助けることを願って！あなたは、ターゲットイメージソースと、あなたが必要なすべてのデータを得たとき、あなたはこのステップ

であなたの画像をフェードインすることができます

に設定を見つける必要がある

使用フェードインする前にを隠す必要

注：配列内の最後の項目のインデックスはimageData.length - 1です。ここではimageIndexをゼロにリセットします。

var mainImage = $('#mainImage'); 
 
var imageData = ['http://www.vincenzo.net/isxkb/images/a/a9/Example.jpg','http://www.buzzlinestravel.co.uk/images/itinerary/1-1276781550ufzx.jpg','http://images.all-free-download.com/images/wallpapers_large/poppies_and_coreopsis_wallpaper_flowers_nature_wallpaper_1542.jpg']; 
 
var imageIndex = 0; 
 
function imageSlide(){ 
 
    //1. you need hide before use fadeIn 
 
    mainImage.hide(); 
 
    //2. you need find target source to show 
 
    mainImage.attr("src",imageData[imageIndex]); 
 
    imageIndex++; 
 
    if(imageIndex === imageData.length - 1){ 
 
     imageIndex = 0; 
 
    } 
 
    //3. the last step, you got all data needed, you can fadeIn your image here 
 
    mainImage.fadeIn("slow"); 
 
} 
 
setInterval(imageSlide,1000);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-2.0.3.js"></script><!DOCTYPE html> 
 
<html> 
 
</head> 
 

 
<body> 
 
    
 
<img src="" alt="" id="mainImage"> 
 

 
</body> 
 
</html>

出典

2017-11-20 10:11:49 Anph

jQueryフェード関数とsetInterval関数

答えて

関連する問題