Question

我在这里发布我的代码并且我已经在点击功能上制作了fadIn-fadeOut图像，但是我想让它们以特定的时间间隔自动淡入淡入淡出。那么我怎样才能实现这一目标，请帮助我。

Answer 1

使用此代码：

setTimeout(function(){
    fO();
}, 1000);

小提琴：http://jsfiddle.net/P4ANC/5/

Answer 2

我刚才做过的事。使用2个图像容器（这样您就可以从一个图像淡入另一个图像）：

var img2 = true;
var imgChangeDelay = 5;
var currentImg = 2;
var images = [
    'mainImg.jpg',
    'mainImg_6.jpg',
    'mainImg_2.jpg',
    'mainImg_3.jpg',
    'mainImg_7.jpg',
    'mainImg_8.jpg'
];

function switchImages() {
    if(img2) {
        img2 = false;
        $(".rightMainImage").css('background', 'url("/img/mainPhotos/'+images[currentImg]+'") no-repeat');
        $(".rightMainImage2").animate({opacity: 0}, 1000, function() {
            setTimeout("switchImages();", (imgChangeDelay*1000));
        });
    } else {
        img2 = true;
        $(".rightMainImage2").css('background', 'url("/img/mainPhotos/'+images[currentImg]+'") no-repeat');
        $(".rightMainImage2").animate({opacity: 1}, 1000, function() {
            setTimeout("switchImages();", (imgChangeDelay*1000));
        });
    }
    if(currentImg == (images.length - 1)) {
        currentImg = 0;
    } else {
        currentImg++;
    }
}

在HTML中：

<div class="rightMainImage">
    <div class="rightMainImage2"></div>
</div>

图片容器的样式：

.rightMainImage, .rightMainImage2 {
    width: 569px;
    float: right;
    height: 335px;
    background: url("/img/mainPhotos/mainImg.jpg") no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}

不要忘记将其添加到页面启动中：

$(document).ready(function() {
    setTimeout("switchImages();", (imgChangeDelay*1000));
});

祝你好运！

Answer 3

在JQuery中，您可以使用动画链和.delay()函数在fadeOut和fadeIn之间创建特定时间的延迟。

一个简单的例子，延迟1秒，淡出div，延迟1秒，然后再次淡入：

<强>使用Javascript：

$('#myDiv').delay(1000).fadeOut(300).delay(1000).fadeIn(300);

<强> HTML：

<div id="myDiv" style="background-color: red; width:200px; height:200px;"></div>

Javascript V2：

或者更高级，如果我们想要在再次淡入之前将div的背景颜色更改为黄色。（这与您的情况类似，您希望在图像元素再次淡入之前更改图片）

$('#myDiv').delay(1000).fadeOut(300, function() {
    $(this).css("background-color","yellow"); // set background to yellow before fading in
}).delay(1000).fadeIn(300);

Javascript V3：

最后，还有一个制作动画循环的方法如下：

function start() {
    $('#myDiv').delay(1000)
               .fadeOut(300, function() {$(this).css("background-color","yellow");})
               .delay(1000)
               .fadeIn(300, start);
}
start();

我创建了一个名为start的函数，当动画停止再次启动时会调用该函数。（当然它也被称为第一次启动它）

。
您的例子：

从您在jsfiddle上发布的代码中，这样的内容将起作用:(对不起内联的javascript）

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                var imgsrc = ["images/c1.png", "images/c2.png", "images/c3.png", "images/c4.png", "images/c5.png"];
                var imgnum = 0;

                function start() {
                    $('#cfifoimg').delay(1000).fadeOut(300, function() {
                        imgnum++;
                        if(imgnum>4) {imgnum=0;}
                        $(this).attr("src",imgsrc[imgnum]);
                    }).delay(1000).fadeIn(300, start);
                }
                start();

            });
        </script>
    </head>
    <body>
        <div id="cfifo">
            <img id="cfifoimg" src="images/c1.png"/>
        </div>
    </body>
</html>

重要提示：并非所有JQuery函数都可以这样链接 - 有关详细信息，请参阅http://api.jquery.com/delay/

我希望图像以特定的时间间隔自动淡化淡入淡出，而不是单击

3 个答案:

小提琴：http://jsfiddle.net/P4ANC/5/