clearinterval doesnt seem to stop rotation

I have a rotating banner on my homepage made in jquery. it uses the following interval

    var countBlackButtons = $(".blackitems").size();
    var changeTrigger = 0;
    var changeIndex = 1;
    function startNewChange() {
      clearInterval(changeIndex);
      changeTrigger = setInterval(function () {
        changeIndex = changeIndex + 1;

        if(changeIndex != (countBlackButtons + 1)) {
          $("#hpbutton" + changeIndex).trigger("click");
        } else {
          changeIndex = 0;

        }
        //$("#homepageCaroselHolder").css({ "background": "url( " + eval("itembg" + changeIndex) + ")" });

      }, 4000);

this is running perfectly apart from i want to stop the rotation when someone clicks a button. i looked into clearinterval and thought this would do what i need it to do:

$("#hpbutton1").click(function() {

  currentItem =开发者_运维问答 itembg1;

  itemcount = 1;



  $("#homepageCaroselHolder").fadeOut(function() {

  $("#homepageCaroselHolder").css({ "background": "url(/media/284/jqueryhompepagecaroselbackground.jpg)" });

      $("#homepageCaroselHolder").fadeIn();

  });

  //clear interval



  clearInterval(changeTrigger);



});

but the it just carries on rotating... is there anything else i could use to stop the rotation?

It's probably due to the fact that if you call startNewChange multiple times you will have multiple intervals running since clearInterval(changeIndex); doesn't clear anything (should be clearInterval(changeTrigger);)