1

我在这里发布我的代码，我已经在点击功能上制作了图像 fadIn-fadeOut，但我希望它们以特定的时间间隔自动淡入淡出。那么我该如何实现呢，请帮帮我。

http://jsfiddle.net/8jigarpatel/P4ANC/

4

3 回答 3

0

我前一阵子做过的事情。使用 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));
});

祝你好运！

于 2012-10-13T14:02:23.390 回答
0

使用此代码：

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

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

于 2012-10-13T13:53:49.493 回答
0

在 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/了解更多信息

于 2012-10-13T15:07:50.360 回答