Rekurencja - jQuery

Question

var act = 1;
var limit = 4;
$(document).ready(function() {
   timer2 = setInterval(auto, 3000); 
});

$("#right").on("click", function() {
    act++;
    if (act > limit){
        act = 1;
    }
    console.log(act);
    clearTimeout(timer2);
    change();
});
$("#left").on("click", function() {
    act--;
    if (act < 1){
        act = limit;
    }
    console.log(act);
    clearTimeout(timer2);
    change();
});

function auto() {
    act++;
    if (act > limit){
        act = 1;
    }
    console.log(act);
    change();
};
$("#1").on("click", function () {
    act = 1;
    clearTimeout(timer2);
    change();
});
$("#2").on("click", function () {
    act = 2;
    clearTimeout(timer2);
    change();
});
$("#3").on("click", function () {
    act = 3;
    clearTimeout(timer2);
    change();
});
$("#4").on("click", function () {
    act = 4;
    clearTimeout(timer2);
    change();
});
           
function change() {
    if (act == 1){
        $(".slides").animate({
        marginLeft: "0px"
    },800);
    }
    else if (act == 2){
        $(".slides").animate({
        marginLeft: "-640px"
    },800);
    }
    else if (act == 3){
        $(".slides").animate({
        marginLeft: "-1280px"
    },800);
    }
    else if (act == 4){
        $(".slides").animate({
        marginLeft: "-1920px"
    },800);
    }
}

Witam

Napisałem kod do slidera, bardzo fajnie działa, więc nie chce w nim nic zmieniać, ale mam problem... strasznie dużo jest w nim powtórzeń, czy macie pomysł jak go poprawić ?

Answer 1

W funkcji change na IFie robisz zmniejszanie wartości o 640px co skok. Ja bym radził to zmienić na funkcje która to obliczy. Na początku funklcji dodaj liczenie:
 

var margin = (act * -640) + "px";

potem wystarczy jedno wywołanie

$(".slides").animate({
        marginLeft: margin
},800);

Natomiast odnośnie kodów
 

$("#1").on("click", function () {
    act = 1;
    clearTimeout(timer2);
    change();
});

Należy zwrócić uwagę iż różną się tylko wartością przypisywaną do act oraz wartośc przypisywana do act jest taka sama jak ID elementu. Dlatego też myśle ze dobrym rozwiązaniem jest przypisanie act wartości ID klikniętego elementu. Zrobisz to za pomocą.
 

act = $(this).attr("id");

Następnie wystarczy zmodyfikować selektor "#1" aby uwzględnić wszystkie elementy "#1, #2, #3".

Comments

Wszystko zrozumiane dzięki wielkie za porady i już się za to zabieram :D