1

私は自分のコードをここに投稿しています。クリック機能で画像を fadIn-fadeOut にしましたが、特定の時間間隔で自動的にfadeIn-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

JQuery では、アニメーション チェーンと.delay()関数を使用して、フェードアウトとフェードインの間に特定の時間の遅延を作成できます。

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 に答える
0

次のコードを使用します。

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

フィドル: http://jsfiddle.net/P4ANC/5/

于 2012-10-13T13:53:49.493 に答える