在容器元素的鼠標懸停上切換圖像

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); 
});