컨테이너 요소의 마우스 오버시 이미지 전환

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