如何在幻燈片中將類添加到當前圖像？

Question

我有一個幻燈片是用JQuery定製的;

$(document).ready(function() { 
    $animating_slideshow = false; 
    $animation_speed = 1000; 
    $amount_of_slides = $("#slider").find(".img-games").find(".img-game").length; 

    $("#slider-left").on("click", function() { 
     if (!$animating_slideshow) { 
      $slidden = parseInt($(this).parent().find(".img-games").css("margin-left")); 
      if ($slidden > 0 || $slidden < 0) { 
       $(this).parent().find(".img-games").animate({"margin-left":"+=170"}, $animation_speed, function() { 
        $animating_slideshow = false; 
       }); 
       $animating_slideshow = true; 
      } else { 
       $(this).parent().find(".img-games").animate({"margin-left":-($amount_of_slides-1) * 170}, $animation_speed, function() { 
        $animating_slideshow = false; 
       }); 
       $animating_slideshow = true; 
      } 
     } 
    }); 

    $("#slider-right").on("click", function() { 
     if (!$animating_slideshow) { 
      $slidden = parseInt($(this).parent().find(".img-games").css("margin-left")); 
       if ($slidden > -($amount_of_slides-1) * 170) { 
        $(this).parent().find(".img-games").animate({"margin-left":"-=170"}, $animation_speed, function() { 
        $animating_slideshow = false; 
       }); 
        $animating_slideshow = true; 
       } else { 
        $(this).parent().find(".img-games").animate({"margin-left":"0"}, $animation_speed, function() { 
        $animating_slideshow = false; 
       }); 
       $animating_slideshow = true; 
       } 
     } 
    }); 
}); 

這是我的html ...

<div id="slider"> 
     <div class="img-games"> 
      <div id="this_slide" class="img-game"> 
       <img src="http://www.maxdamage.org/wp-content/uploads/2012/05/pokemon-gameboy.jpg" width='170px' height='115px' class='degrades' alt='pokemon' title='Pokemon'> 
      </div> 
      <div class="img-game"> 
       <img src="http://1.bp.blogspot.com/-U62BIDPN79U/UV1hPr9xtAI/AAAAAAAAENs/mKIrEDb4RAw/s320/Super_mario_land.png" width='170px' height='115px' class='degrades' alt='Mario' title='Mario'> 
      </div> 
      <div class="img-game"> 
       <img src="http://1.bp.blogspot.com/-J7x8JfY21Yk/UUea7UsjUZI/AAAAAAAAA0M/E2qpkAZFsnM/s1600/links_awakening2.png" width="170px" height="115px" class="degrades" alt='Zelda' title='Zelda'> 
      </div> 
      <div class="img-game"> 
       <img src="http://www.consoleclassix.com/info_img/Rayman_GBC_ScreenShot2.gif" width="170px" height="115px" class="degrades" alt='Rayman' title='Rayman'> 
      </div> 
     </div> 
</div> 

我怎麼會去加入一個名爲「當前」，以當前可在屏幕上看到，任何幫助將像新類不勝感激，提前致謝！

Answer 1

兩個可能的解決方案：

1）如果你跟蹤的幻燈片放映當前索引的，你可以用它來設置類，如下所示：

$('.current').removeClass('current'); 
$('.img-game:eq(' + currentIndex + ')').addClass('current'); 

2），當點擊左邊或右邊，使用current類的位置將該類重新分配到其他位置。下面是一個左擊例如：

$('.current').removeClass('current').parent().next().child('.img-game') 
    .addClass('current') 

對於點擊右鍵，你會用.prev()，而不是.next()。在更改選擇之前，還應該包含一個檢查以確保下一個元素存在。