鼠標懸停時滾動圖像

Question

我試圖做一個腳本，將鼠標懸停在一組五個不同的圖像上。 類似於fb畫廊。

這是我的嘗試：

<script type="text/javascript">
$(document).ready(function(){
    $(".collectionThumb").mouseenter(function(){
        var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>');
        /*
        rotator :=
            Object {1: Array[5], 2: Array[5]}
                1: Array[5]
                0: "/images/picture_gallery/779cfee29cdd-img-5529.thumb.jpg"
                1: "/images/picture_gallery/43f561c548e6-img-5522.thumb.jpg"
                2: "/images/picture_gallery/28c56302e920-img-5527.thumb.jpg"
                3: "/images/picture_gallery/1a57472c9edf-img-5523.thumb.jpg"
                4: "/images/picture_gallery/0323ab8eb12c-img-5524.thumb.jpg"
                length: 5
                __proto__: Array[0]
                2: Array[5]
                0: "/images/picture_gallery/f340c8840241-img-5535.thumb.jpg"
                1: "/images/picture_gallery/859ae8584caf-img-5541.thumb.jpg"
                2: "/images/picture_gallery/f340c8840241-img-5535.thumb.jpg"
                3: "/images/picture_gallery/1522b44b2de8-img-5546.thumb.jpg"
                4: "/images/picture_gallery/ee1d7402c73f-img-5549.thumb.jpg"
                length: 5
                __proto__: Array[0]
                __proto__: Object
        */
        var collectionid = $(this).data('collectionid');
        for (var i = 0; i < rotator[collectionid].length; i++) {
            // get src for the next thumbnail to show
            var nextThumb = rotator[collectionid][i];
            replaceCollectionThumb(nextThumb, collectionid);
        }
    });
});

function replaceCollectionThumb(el, collectionid) { 
    setTimeout(function() { replaceThumb(el, collectionid); }, 1000); 
}
function replaceThumb(el, collectionid) {
    //console.log(el);
    $(".collectionThumb").each(function(i, v){
        if (collectionid == $(v).data('collectionid')) {
            //console.log($(v).data('collectionid'));
            var img = loadImage(el, 'title');
            $(v).children('img').remove();
            $(v).append(img.imgObj);
        }
    });
}
function loadImage(path, imgTitle, width, height) {
    if (undefined == width) width = 'auto';
    if (undefined == height) height = 'auto';
    var imgWidth;
    var imgHeight;
    var img = new Image();

    $(img).load(function() {
      $(this).width(width).height(height);
      imgWidth = $(this).width;
      imgHeight = $(this).height;
    });
    img.src = path;
    img.alt = imgTitle;

    var obj = new Object();
    obj.imgObj = img;
    obj.width = imgWidth;
    obj.height = imgHeight;

    return obj;
}
</script>

我將尋找現有的解決方案，但是我想了解使它起作用所缺少的東西。

現在發生的事情是在所有超時發生之后，替換了圖像，但圖像本身相同。

我想知道超時回調何時結束，刷新圖像，等待一秒鍾后，對下一個執行相同操作，但是我發現我對它的工作原理有一個誤解。

幫助/評論？

Answer 1

如果有人正在尋找類似的東西，這是我的解決方案：

<script type="text/javascript">
$(document).ready(function(){
    var indx = 0, numberOfFeatures = 4;
    var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>');
    var currentCollection = 1;
    var run = false;
    function imageRotate(){
        if (run) {
            indx++;
            if (indx > numberOfFeatures) { indx = 0; }
            var nextThumb = rotator[currentCollection][indx];
            var collectionSelector = 'collectionThumb-' + currentCollection;
            $('#'+collectionSelector+' img').attr('src',nextThumb);
            setTimeout( imageRotate , 800 );
        }
    }

    $(".collectionThumb").mouseenter(function(){
        currentCollection = $(this).data('collectionid');
        run = true;
        imageRotate();
    });

    $(".collectionThumb").mouseleave(function(){
        run = false;
        imageRotate();
    });
});

</script>

由於過渡中的行為異常，我將其移至requestAnimationFrame方法。 這是我的最終解決方案：

<script type="text/javascript">
$(document).ready(function(){
    var indx = 1;
    var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>');
    var currentCollection = 1;
    var run = false;

    var globalID;
    var fps = 2;

    function photoRollover(){
        if (run) {
            setTimeout(function() {
                var numberOfFeatures = rotator[currentCollection].length - 1;
                if (indx > numberOfFeatures) { indx = 0; }
                var nextThumb = rotator[currentCollection][indx];
                var collectionSelector = 'collectionThumb-' + currentCollection;

                $('#'+collectionSelector+' img').attr('src',nextThumb);
                indx++;

                globalID = requestAnimationFrame(photoRollover);

            }, 3000 / fps );
        }
    }

    $(".collectionThumb").mouseenter(function(){
        run = true;
        currentCollection = $(this).data('collectionid');
        var collectionSelector = 'collectionThumb-' + currentCollection;
        var nextThumb = rotator[currentCollection][indx];
        $('#'+collectionSelector+' img').attr('src',nextThumb);
        indx++;
        globalID = requestAnimationFrame(photoRollover);
    });

    $(".collectionThumb").mouseleave(function(){
        run = false;
        cancelAnimationFrame(globalID);
    });

});

</script>