jQuery - (this) .next 처음으로 돌아 가기

Question

6 개의 이미지를 마우스로 가리 키려고하면 변경 사항이 거의 지연되지 않고 6 번째 이미지로 이동해야합니다. 첫 번째로 돌아 가면 사용자가 호버링을 중지하면 즉시 첫 번째로 되돌려 야합니다.

나는 부분적으로 작업을하고 있지만 이미지를 순환시키고 있지만 지연을 추가하지 않는 것처럼 보이고 6 일 후에 모든 이미지가 사라지고 멈추게된다. 처음으로 돌아 가라.

여러분의 도움을 진심으로 감사드립니다.

CSS의 :

#map-container { 
       float: left; 
       position: relative; 
       width: 750px; 
       margin-top: 50px; 
      } 

      #map-container img { 
       width: 100%; 
      } 

      .map-marker { 
       position: absolute; 
       float: left; 
      } 

      .map-marker img { 
       width: 56px !important; 
       cursor: pointer; 
       display: none; 
       position: absolute; 
      } 

      .map-marker img.active { 
       display: block; 
      } 

      .map-info-box { 
       width: 350px; 
       min-height: 100px; 
       background: #f1f1f1; 
       position: relative; 
       margin-left: 50px; 
       display: none; 
       overflow: hidden; 
      } 

      .map-info-box h2 { 
       display: block; 
       background: #f65b2a; 
       width: 100%; 
       height: 30px; 
       font-size: 22px; 
       color: white; 
       text-align: center; 
       margin-top: 0px; 
       line-height: 30px; 
      } 

      .map-info-box p { 
       font-size: 14px; 
       color: #838383; 
       padding: 5px; 
      } 

      .map-info-box .findmore { 
       width: 100px; 
       height: 30px; 
       margin-left: 125px; 
       background: #f65b2a; 
       text-align: center; 
       font-size: 14px; 
       line-height: 30px; 
       color: white; 
       margin-bottom: 10px; 
       margin-top: 20px; 
       border-radius: 3px; 
      } 

      .map-info-box .findmore a { 
       text-decoration: none; 
       color: white; 
       display: block; 
      } 

      .map-marker:hover .map-info-box { 
       display: block; 
      } 

JQuery와는 :

$(document).ready(function() { 


     $(".map-marker").hover(function(){ 

       var i = 0; 

       while (i < 1000){ 

       $('img.active').removeClass(function(){ 
        $(this).next('img').addClass('active'); 
        return 'active'; 
       }) 

       delay("300") 

       i++; 


       } 

     }); 

     }); 

html로 :이 작업을 수행

<div id="map-container"> 
      <img src="Map-of-UK.png" alt="UK Map" /> 

      <div class="map-marker" style="top: 600px; left: 300px;"> 
       <img src="m1.png" alt="marker" class="active" /> 
       <img src="m2.png" alt="marker" /> 
       <img src="m3.png" alt="marker" /> 
       <img src="m4.png" alt="marker" /> 
       <img src="m5.png" alt="marker" /> 
       <img src="m6.png" alt="marker" /> 

       <div class="map-info-box"> 
        <h2>This is a test information box</h2> 

        <p> 
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        </p> 


        <div class="findmore"> 
         <a href="#">Find Out More</a> 
        </div> 


       </div> 

      </div> 

     </div> 

Answer 1

당신은 setInterval이 필요합니다.

처음에는 여기 에 대한 코드 단을위한 스 니펫이 있습니다. 간격에 대한

var $next = $(this).next('img'); 
if($next.length) $next.addClass('active'); 
else $(this).siblings().first().addClass('active'); 

는이 같은 somehting를 사용

var timer; 
$(".map-marker").hover(function(){ 

    timer = setInterval(function(){ 

     $('img.active').removeClass(function(){ 
      $(this).next('img').addClass('active'); 
      return 'active'; 
     }); 


    }.bind(this), 300); 
}, function(){ 
    clearInterval(timer); 
});