jquery - 将鼠标悬停在容器元素上时切换图像

Question

在我的产品网站搜索结果中，当主产品图像悬停或鼠标悬停在其上时，我需要以 1 秒的间隔滚动浏览 4 个产品图像。这需要在鼠标移开时停止并重置到主图像。我的图像是从主图像开始按顺序、数字命名的(例如主 111.jpg、辅助 112.jpg ......) 以下代码是我现在所拥有的，但基本上不起作用，我真的被卡住了。任何帮助将不胜感激。

例如Similar functionality

    // when hovering over a result image, alt images display
     $('.pImg1').mouseover(function(){
             imgRef1 = $(this).attr('src'); // returns the full file path
             imgPath1 = imgRef1.substr(0, 11);// returns the first 11 chars starting at 0 ie. ../img/dev/
             imgName1 = imgRef1.substr(11, imgRef1.length-15); // returns the actual file name without the extension
             imgExtn1 = imgRef1.substr(imgRef1.length-4); // returns the file extension
             originalImgName = parseInt(imgName1); // original image name as Integer
             imgName2 = originalImgName;
             count7 = 1


            setInterval(function(){  
                    if(count7 < 4){
                        if(count7 > 1){
                            imgName2 = imgName2 + 1;  // increments imgName2
                            count7 = count7 + 1; // increments count7 by 1
                        }
                        fullImgName = imgPath1 + imgName2 + imgExtn1;
                        $(this).attr('src', fullImgName);
                    } else{
                        imgName2 = originalImgName; // resets image name back to original
                        count7 = 1; // resets counter
                         fullImgName = imgPath1 + imgName2 + imgExtn1;
                        $(this).attr('src', fullImgName);
                        }
                     }, 1000);// end setInterval                     
      }); // end hover

Answer 1

试试这个。假设您提供了使用图像名称的正确方法，它应该可以工作。

$(function() {
    var interval, originalName,
        startAnimation = function() {
           var  img = $(this), path = img.attr('src'),
                preffix = path.substr(0, 11), 
                name = parseInt(path.substr(11, path.length - 15), 10),
                ext = path.substr(path.length - 4),
                counter = 1;
           originalName = path;

           //stop animation if it is running
           if(interval !== undefined) { interval = clearInterval(interval);}

           interval = setInterval(function(){
               img.attr('src', preffix + (name + (counter++)%4) + ext); 
           }, 1000);


        }, 
        stopAnimation = function() {
            var img = $(this);

            if(interval !== undefined) { interval = clearInterval(interval);}
            img.attr('src', originalName);
        };

    $(".pImg1").hover(startAnimation, stopAnimation);
});