Javascript 鼠标悬停时的滚动图像

我正在尝试做一个脚本，鼠标悬停在一组五个不同的图像上。类似于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>

$（文档）.ready（函数（）{
$（“.collectionThumb”）.mouseenter（函数（）{
var rotator=JSON.parse（“”）；
/*
旋转器：=
对象{1:Array[5]，2:Array[5]}
1:数组[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”
长度：5
__原型：数组[0]
2:数组[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”
长度：5
__原型：数组[0]
__原型：对象
*/
var collectionid=$（this.data（'collectionid'）；
对于（var i=0；i

我将寻找一个现有的解决方案，但我想了解我所缺少的是什么，以使其发挥作用

现在发生的是在所有超时发生后，图像被替换，但图像本身是相同的

我想知道超时回调何时结束，刷新图像，等待一秒钟后，对下面的图像执行相同的操作，但我发现我对它的工作原理有一个错误的理解

---

帮助/评论？

如果有人正在寻找类似的东西，这里是我的解决方案：

<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>

<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>

$（文档）.ready（函数（）{
var indx=0，numberOfFeatures=4；
var rotator=JSON.parse（“”）；
var currentCollection=1；
var-run=false；
函数imageRotate（）{
如果（运行）{
indx++；
如果（indx>numberOfFeatures）{indx=0；}
var nextThumb=旋转器[currentCollection][indx]；
var collectionSelector='collectionThumb-'+currentCollection；
$（“#”+collectionSelector+“img”）.attr（'src'，nextThumb）；
设置超时（imageRotate，800）；
}
}
$（“.collectionThumb”）.mouseenter（函数（）{
currentCollection=$（this）.data（'collectionid'）；
run=true；
图像旋转（）；
});
$（“.collectionThumb”）.mouseleave（函数（）{
运行=错误；
图像旋转（）；
});
});

因为在转换中有奇怪的行为，所以我转向了requestAnimationFrame方法。以下是我的最终解决方案：

<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>

<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>

$（文档）.ready（函数（）{
var-indx=1；
var rotator=JSON.parse（“”）；
var currentCollection=1；
var-run=false；
球形变种；
var-fps=2；
函数photoRollover（）{
如果（运行）{
setTimeout（函数（）{
var numberOfFeatures=旋转器[currentCollection]。长度-1；
如果（indx>numberOfFeatures）{indx=0；}
var nextThumb=旋转器[currentCollection][indx]；
var collectionSelector='collectionThumb-'+currentCollection；
$（“#”+collectionSelector+“img”）.attr（'src'，nextThumb）；
indx++；
globalID=requestAnimationFrame（photoRollover）；
}，3000/帧）；
}
}
$（“.collectionThumb”）.mouseenter（函数（）{
run=true；
currentCollection=$（this）.data（'collectionid'）；
var collectionSelector='collectionThumb-'+currentCollection；
var nextThumb=旋转器[currentCollection][indx]；
$（“#”+collectionSelector+“img”）.attr（'src'，nextThumb）；
indx++；
globalID=requestAnimationFrame（photoRollover）；
});
$（“.collectionThumb”）.mouseleave（函数（）{
运行=错误；
取消动画帧（globalID）；
});
});