jQuery Image Crossfadeが動作しない

Question

こんにちは、私たちのjQueryイメージクロスフェードセットアップが間違っています！ 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ましたあなたの質問に含めることが非常に役に立ちました）