jQuery 带有setInterval函数的淡入淡出函数

Question

我正在使用 jQuery 创建简单的幻灯片并且它工作正常我只想使用淡入淡出功能以及下面的代码。我使用了淡入淡出功能，但它正在工作，它不会在更改时淡化图像。

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

Answer 1

检查代码below.For生产用途你还是要'polish'it.Good运气

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">

Answer 2

您已经使用了 fadeIn，但是为了使图像淡出在中，必须隐藏它，最简单的方法是淡出它 out先。

使用fadeOut回调，可以等待fadeOut完成，设置src，然后fadeIn:

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

请注意，"slow" = 600 毫秒，因此 2 倍慢（淡出然后淡入）将比您的 setInterval 1000 毫秒更长，并且会产生一些疯狂的结果。

Answer 3

请参阅我的代码遵循 3 个步骤，希望这对您有所帮助！

在使用 fadeIn

mainImage

您需要找到目标图片来源并设置为mainImage
当你获得所有需要的数据后，你可以在这一步淡入你的图像

注意：数组中最后一项的索引是 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>

jQuery 带有setInterval函数的淡入淡出函数

jQuery fade function with setInterval function

javascript

jquery

fade

setinterval