圖片依序顯示

by fu06h96z8

HTML

<div class="productdemo">
    <img src="http://placehold.it/30x30">
    <img src="http://placehold.it/30x30">
    <img src="http://placehold.it/30x30"> 
    <img src="http://placehold.it/30x30"> 
    <img src="http://placehold.it/30x30">
</div>
<button id="replay">Play</button>

CSS

.productdemo {
    position: relative;
    width : 300px;
    height: 50px;
    border:1px solid black;
}
.productdemo img {
    display : none; 
}

JavaScript

function prodFadeIn() {
    // loopCount: 第幾張圖片開始顯示, loopEnd: 圖片全部數目 
    var loopCount = 1,
        loopEnd = $('.productdemo img').length;

    $('.productdemo img').first().fadeIn(200, function() {

        // 圖片全部顯示完後，play 按鈕才取消 disable 屬性 
        if (loopCount >= loopEnd) {
            $('#replay').removeAttr('disabled');
        }

        $(this).next().fadeIn(200, arguments.callee);

        ++loopCount; // 計算顯示到第幾張圖片 
    });
}

$(window).load(function() {
    $('#replay').click(function() {
        $('.productdemo img').stop(true, true).hide();
        $('#replay').attr('disabled', 'true');
        prodFadeIn();
    });
});