受講生対象の補助資料です。
以下jQuery教材のドーナツ本のスライドギャラリーの補助資料です。
ソースが読めてもスライド機能のからくりがわかりづらいですね。
アニメーションにしましたので参考にしてください。
1 2 3 4 5 6 7 8 9 10 | //右矢印ボタンが押された際の挙動 $( "#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" ); }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 | //左矢印ボタンが押された際の挙動 $( "#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" ) }); }); |