jQuery Image Crossfade가 작동하지 않습니다.

Question

안녕하세요 jQuery 이미지 crossfade 설정에 문제가 있습니까? http://tips.techmatemn.com/

HTML

<div class="hero-cycler"> 
    <img class="active" alt="Tips qualified Client 1" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/hero-bk-1.jpg"> 
    <img alt="Tips qualified Client 2" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/hero-bk-2.jpg"> 
</div> 

CSS

.hero-cycler{position:relative;} 
.hero-cycler img{position:absolute;z-index:1} 
.hero-cycler img.active{z-index:3} 

SCRIPT

<script> // homepage client images 
function cycleImages(){ 
     var $active = $('.hero-cycler .active'); 
     var $next = ($active.next().length > 0) ? $active.next() : $('.hero-cycler img:first'); 
     $next.css('z-index',2);//move the next image up the pile 
     $active.fadeOut(1500,function(){//fade out the top image 
     $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image 
      $next.css('z-index',3).addClass('active');//make the next image the top one 
     }); 
    } 

$(document).ready(function(){ 
// run every 7s 
setInterval('cycleImages()', 7000); 
}) 
</script> 

감사합니다!

Answer 1

함수 호출 방식을 변경하십시오. setInterval은 감가 상각되는 문자열 매개 변수를 사용하며 일반적으로 권장되지 않습니다. 아래 표시된 표준 방법을 사용하여 기능을 올바르게 실행하십시오.

변경 setInterval('cycleImages()', 7000); 일반적인 필러 이미지 setInterval(cycleImages, 7000);

전체 작업 사본 :

function cycleImages() { 
 
    var $active = $('.hero-cycler .active'); 
 
    var $next = ($active.next().length > 0) ? $active.next() : $('.hero-cycler img:first'); 
 
    $next.css('z-index', 2); //move the next image up the pile 
 
    $active.fadeOut(1500, function() { //fade out the top image 
 
    $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image 
 
    $next.css('z-index', 3).addClass('active'); //make the next image the top one 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    // run every 7s 
 
    setInterval(cycleImages, 7000); 
 
})

.hero-cycler { 
 
    position: relative; 
 
} 
 
.hero-cycler img { 
 
    position: absolute; 
 
    z-index: 1 
 
} 
 
.hero-cycler img.active { 
 
    z-index: 3 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hero-cycler"> 
 
    <img class="active" alt="Tips qualified Client 1" src="https://unsplash.it/300/200/?image=0"> 
 
    <img alt="Tips qualified Client 2" src="https://unsplash.it/300/200/?image=1"> 
 
</div>

(브라우저 콘솔의 빠른 검사는 당신에게 오류 표시 것 : Uncaught ReferenceError: cycleImages is not defined을하는 귀하의 질문에 포함하는 것이 매우 도움이되었을 것입니다)