イメージギャラリー、FadeOut、jQueryのナビゲーション

Question

イメージギャラリーを作成しようとしていますが、ナビゲーションに少し問題があります。 問題は次のとおりです： 画像がフェードアウトして終了するたびに、小さなボタンの色は変わりますが、フェードアウトが終了した時点ではなく、現在の画像がフェードアウトするとすぐに小さなボタンを変更します。

HTML：

<div id="portfolio_cycler"> 

    <img class="active" src="images/pic1.jpg" alt="picture 1" /> 
    <img src="images/pic2.jpg" alt="picture 2" /> 
    <img src="images/pic3.jpg" alt="picture 3" /> 
    <img src="images/pic4.jpg" alt="picture 4" /> 
    <img src="images/pic5.jpg" alt="picture 5" /> 

</div> 

CSS：

#portfolio_cycler{ 
position:relative; 
left: 55px; 
top: 50px; 
} 
#portfolio_cycler img{ 
position:absolute;z-index:1 
} 
#portfolio_cycler img.active{ 
z-index:3 
} 
#buttons{ 
position:absolute; 
top: 490px; 
left: 55px; 
} 

のjQuery：

function cycleImages(){ 

    var $active = $('#portfolio_cycler .active'); 



    var $next = ($('#portfolio_cycler .active').next().length > 0) ? $('#portfolio_cycler .active').next() : $('#portfolio_cycler img:first'); 
    activ=$active.index(); // INDEX TRENUTNO AKTIVNOG ELEMENTA 

    $next.css('z-index',2);//move the next image up the pile 
    $("#buttons img").eq(activ).attr('src','images/button_active.png'); 
    $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).delay(4000).addClass('active');//make the next image the top one 
    cycleImages() 
    }); 
} 

$(document).ready(function(){ 
pic_number=$("#portfolio_cycler img").length; 
for (i=0;i<pic_number;i++) 
{ 
    $("#buttons").append("<a href='javascript:void(0)'><img src='images/button.png' /></a>"); 
} 
// run every 7s 
setTimeout('cycleImages()', 4000); 

}); 

私の質問には、いくつかの混乱を招くかもしれないので、私は同様の効果を達成したい：http://static.dreamcss.com/wp-content/uploads/example/ ます現在の画像の開始直前にアクティブなボタンがどのように変化するかを確認するスライドする？私はここで私のボタンと同じことを達成したい。

Answer 1

あなたがしたことは、フェードアウトする画像のボタンを「アクティブにする」ことです。次に表示される画像のボタンを有効にしたいと思いますか？代わりに、次のコードで：

activ=$active.index(); 
... 
$("#buttons img").eq(activ).attr('src','images/button_active.png'); 

あなたは[あなたが本当にそれをグローバルにしたくない、あなたが変数として「ACTIV」を宣言する必要があることに注意してください]このコードを使用することができます。

var next_active = $next.index(); //$active is changed to $next 
... 
$("#buttons img") 
    .eq(next_active) 
    .attr('src','images/button_active.png'); 

私はここにあなたの目標の100％わからないんだけど、あなたも、あなたが使用したい、その場合には、元の画像に非アクティブなボタンをリセットしたいことがあります。

$("#buttons img") 
    .attr('src','images/button.png') 
    .eq(next_active) 
    .attr('src','images/button_active.png'); 

EDIT： あなたの主な問題は、あなたのdelay（）関数の使用にあります。これにより、チェーン内に遅延が発生しますが、次の行のコードはすぐに実行されます。 cycleImages（）の次の呼び出しの実行を遅延させたいので、delay（）の代わりにsetTimeout（）をここで使用してください。

上記の変更を加えなければなりません。そうしないと、フェードアウトした画像のボタンが有効になります。すべてのすべてで、次のjQueryコードは、あなたのcycleImages機能のために働く必要があります。

function cycleImages(){ 

    var $active = $('#portfolio_cycler .active'); 
    var $next = ($active.next().length > 0) ? $active.next() : $('#portfolio_cycler img:first'); 
    // Note the use of $active instead of using selectors again 

    var next_active = $next.index(); 
    $next.css('z-index',2); 
    $("#buttons img").eq(next_active).attr('src','images/button_active.png'); 

    $active.fadeOut(1500, function() { 
     $active.css('z-index',1).show().removeClass('active'); 
     $next.addClass('active'); 
     /* You can add the class active to $next immediately here. 
      The delay is instead needed before the function call below, hence 
      setTimeout is used. Also since you have set the z-index of an active 
      image to 3 in your css, setting it in the javascript is redundant */ 

     setTimeout(cycleImages, 4000); 
    }); 
}