スライドギャラリー解説補助資料〜jQueryドーナツ本

受講生対象の補助資料です。
以下jQuery教材のドーナツ本のスライドギャラリーの補助資料です。

• スライダの構造
• スクリプトの解説
• HTML構造

ソースが読めてもスライド機能のからくりがわかりづらいですね。
アニメーションにしましたので参考にしてください。

nextの動作

//右矢印ボタンが押された際の挙動
$("#nav .next").click(function(){
 $("#slide:not(:animated)").animate({
  "margin-left" : -1*$("#slide li").width()
 },function(){
  $("#slide").css("margin-left","0").append($("#slide li:first-child"));
  $("#paging li.active").removeClass("active");
  $("#paging li[data-img='"+$("#slide li:first-child img").attr("src")+"']").addClass("active");
 });
});

prevの動作

//左矢印ボタンが押された際の挙動
$("#nav .prev").click(function(){
 $("#slide:not(:animated)")
  .css("margin-left",-1*$("#slide li").width())
  .prepend($("#slide li:last-child"))
  .animate({
    "margin-left" : 0
  },function(){
    $("#paging li.active").removeClass("active");
    $("#paging li[data-img='"+$("#slide li:first-child img").attr("src")+"']").addClass("active")
  });
});