자바 스크립트 setInterval은 다음 이미지가 아닌 동일한 이미지를 반복해서 페이드합니다.

Question

(편집) 5 초마다 3 개의 이미지 사이에서 페이드를 회전시켜야합니다. 그러나 오히려 그것은 5 초마다 한 번씩 같은 것을 퇴색 시키며, 다음 이미지로 갈 수 없습니다. 아마 오류가 초기 게시물에 아무것도 발생되지 않았기 때문에 여기에 티끌 문맥의 :

   $(".paging").show(); 

       $(".paging a:first").addClass("active"); 

       $(".image_reel img:first").addClass("active"); 




       var imageWidth = $(".window").width(); 
       var imageSum = $(".image_reel div").size(); 
       var imageReelWidth = imageWidth * imageSum; 



       //Adjust the image reel to its new size 
       $(".image_reel").css({'width' : imageReelWidth}); 


       //Paging and Slider Function 
       rotate = function(){ 


        var triggerID = $active.attr("rel") - 1; //Get number of times to slide 
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide 

        $(".paging a").removeClass('active'); //Remove all active class 

        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 

        //Slider Animation 
        $(".image_reel").animate({ 
         left: -image_reelPosition 
        }, 500); 

        $(".image_text").animate({ 
         left: -image_reelPosition 
        }, 500); 
       }; 
       //Below is part not working right 
       fadeImg = function(){ 

        $("#group1 img").removeClass('active'); 
        $next.addClass('active');    

        $("#group1 img").animate({ 
         opacity: 0 
        }, 500); 

        $next.animate({ 
         opacity: 1 
        }, 500); 



       }; 

       //Rotation and Timing Event 
       rotateSwitch = function(){ 
        play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds 
         $active = $('.paging a.active').next(); //Move to the next paging 
         if ($active.length === 0) { //If paging reaches the end... 
          $active = $('.paging a:first'); //go back to first 
         } 
         rotate(); //Trigger the paging and slider function 
        }, 15000); //Timer speed in milliseconds (7 seconds) 

        playFade = setInterval(function(){ 

         $next = $(".image_reel img.active").next(); 
         if($next.length === 0){ 
          $next = $(".image_reel img:first"); 
         } 
         fadeImg(); 
        }, 5000); 
       }; 

       rotateSwitch(); //Run function on launch 

       //On Hover 
       $(".image_reel a").hover(function() { 
        clearInterval(play); //Stop the rotation 
       }, function() { 
        rotateSwitch(); //Resume rotation timer 
       }); 

       //On Click 
       $(".paging a").click(function() { 
        $active = $(this); //Activate the clicked paging 
        //Reset Timer 
        clearInterval(play); //Stop the rotation 
        rotate(); //Trigger rotation immediately 
        rotateSwitch(); // Resume rotation timer 
        return false; //Prevent browser jump to link anchor 
       }); 

마크 업 : 나는 페이드 효과를 생성하는 플러그인을 알고,하지만 난

<div class="image_reel"> 
    <div id="group1"> 
     <a href="#"><img src="images/reel_1.png" class="first" /></a> 
     <a href="#"><img src="images/reel_1b.png" class="second" /></a> 
     <a href="#"><img src="images/reel_1c.png" class="third" /></a> 

     <p class="first"> A</p> 
     <p class="second"> B</p> 
     <p class="third">C</p> 

     <div class="slidernav"> 
      <a href="#first"> A</a> 
      <a href="#second"> B</a> 
      <a href="#third"> C</a> 
     </div> 
    </div> 
</div> 
​ 

주 지금 수동으로 해보려고합니다. 모든 응답 주셔서 감사합니다.

Answer 1

문제는 다음과 같습니다. $next = $(".image_reel img.active").next(); 당신이하고 싶은 것을하지 않습니다. 무엇을하고 있는지는 img.active을 찾은 다음 형제가 없으므로 다음 형제를 찾으려고 시도합니다. $next은 빈 jQuery 객체로 설정됩니다.

$next = $(".image_reel img.active").parent().next().find('img');