2

多数の画像 (ここでは 3 つ) を循環する画像フェーダーを作成しようとしています。この関数をループして適切な画像にフェードインするように作成しましたが、空のスペースがないように、1 つの画像をフェードアウトしながら次の画像をフェードインします。配列の最後に到達した場合を除いて、配列内の最後の画像をフェードアウトしてから、ループバックして最初の画像を再びフェードインし、2 番目の空きスペースを作成します。

JavaScript

<script type="text/javascript">
        var img_arr = [
            '#img1',
            '#img2',
            '#img3'
        ]
        var i = 0;
        arr_length = img_arr.length;
        //fade function
        function fade_gal() {
            $(img_arr[i])
                .animate(
                    {opacity: '1.0' }, 500
                );
            $('.img').delay(3000).animate({opacity: 0.0}, 500);
            i = i + 1;
            if (i == arr_length) {
                i = 0;
            }
        }
        $(document).ready(function img_gallery() {
            //initial function
            fade_gal();
            //set function interval
            setInterval( function() {fade_gal()}, 3500);
        })
    </script>


html

<div id="scroller">
            <img src="../../images/1.jpg" alt="img1" width="300px" id="img1" class="img"/>
            <img src="../../images/2.jpg" alt="img1" width="300px" id="img2" class="img"/>
            <img src="../../images/3.jpg" alt="img1" width="300px" id="img3" class="img"/>
        </div>
4

3 に答える 3

1

あなたのコードは私を混乱させましたが、それが間違っていたわけではありません。タイミングがわかりにくかった。

これは私のバージョンです: ( jsFiddle )

var img_arr = [
    '#img1',
    '#img2',
    '#img3'
    ];



arr_length = img_arr.length;
var i = arr_length;
//fade function

$('.img').css('opacity', 0.0);

function fade_gal() {

    $(img_arr[(i-1)%arr_length]).animate({opacity: 0.0}, 500);
    $(img_arr[i%arr_length]).animate({opacity: 1.0}, 500);

    i++;
}

$(document).ready(function () {
    //initial function
    fade_gal()

    //set function interval
    setInterval(function() {
        fade_gal()
    }, 3500);
})​
于 2012-09-30T18:28:42.043 に答える
1

実行するたびにすべての画像をフェードする理由がわかりません...

画像が z-index なしで絶対的に配置されている場合、上部と下部があります。

あなたがしなければならないのは、一番上の画像をフェードアウトさせ、それが終わったら、それをパイルの一番下に送ることだけです.

次のようにコーディングできます（編集済み）（ここにフィドルがあります：http://jsfiddle.net/txLet/）：

//fade function
function fade_gal() {
    var container = $('#container');
    var imgs = $('img',container);
    var img = imgs.last();
    img.animate({opacity: '0'}, {duration: 500, complete: function(){
        container.prepend(img); //send image to bottom
        img.css({opacity: 1});
    }});
}
$(document).ready(function img_gallery() {
    //initial function
    fade_gal();
    //set function interval
    setInterval(fade_gal,2000);
})​
于 2012-09-30T18:20:52.203 に答える
0

この行を変更してみてください：

$('.img').delay(3000).animate({opacity: 0.0}, 500);

これに：

$(img_arr[i]).delay(3000).animate({opacity: 0.0}, 500);

フェードアウトとフェードインの間に矛盾があるような気がします。

于 2012-09-30T18:12:33.147 に答える