Issues With SetInterval

I'm creating a simple slideshow using jQuery and some javascript, but I'm running into issues using the setInterval functions. JSFiddle of the Project $(document).ready(function ()

Solution 1:

What is the most effective way I can have an interval that pauses after user input, then resumes again?

Look at this example DEMO: http://jsfiddle.net/n8c3pycw/1/

var Timer = {
    totalSeconds: 300,

    start: function () {
        var self = this;

        this.interval = setInterval(function () {
            self.totalSeconds -= 1;
            if (self.totalSeconds == 0) {
                Timer.pause();
            }
            $("#timer").text(parseInt(self.totalSeconds, 10));
        }, 1000);
    },
    pause: function () {
        clearInterval(this.interval);
        delete this.interval;
    },

    resume: function () {
        if (!this.interval) this.start();
    }
}

Timer.start();
$("#start").click(function(){
    Timer.resume();
});
$("#stop").click(function(){
    Timer.pause();
});

Solution 2:

Try using either setTimeout or setInterval.

example: var autoScrollInterval = runInterval();

function tochangeyourimage (delta) {
  autoRunInterval = runInterval();
};

function runInterval() {
  return setInterval(tochangeyourimage, 7000, 1);