Rajitha
Rajitha

Reputation: 47

jquery button click function do automatically with time delay

Hi I need to do bellow jquery function without click next button. I tried so many was but those are not working can any one give me a proper way to do this please

  var clickNext = $(".next_button").click(function() {
    var imgWidth = $("#slider_box_01").width();
    var numImgs = 16;
    var count = 0;

    slideId++;

    if (slideId == 3) {
        slideId = 0;
    }
    imageSlider(imgWidth, numImgs, count, slides, slideId);

});

function imageSlider(imgWidth, numImgs, count, slides, slideId) {

    var animation = setInterval(function() {

        var position = -1 * (count * imgWidth);

        $('#slider_box_01').find('.slider_image').css('margin-left', position);


        count++;

        if (count == numImgs) {

            count = 0;
            $('#slider_box_01').find('.slider_image').css('margin-left', 0  );

            $(".slider_image").attr("src", slides[slideId]);

            clearInterval(animation);

        }
    }, 80);  

this function works well if I click the .next_button but I need to do that without click any button after load my web page every 2 second.

Upvotes: 1

Views: 391

Answers (2)

Exlord
Exlord

Reputation: 5371

the simplest solution without any code change :

setInterval(function(){
    $(".next_button").click();
},2000);

Upvotes: 2

emerson.marini
emerson.marini

Reputation: 9348

You're already using setInterval() and that's exactly what you need here.

// When document is ready.
$(function () {
    // Couldn't find this variable declared anywhere in your code?
    var slideId = 0;

    // A function to wrap the code previously set to be executed
    // on the click event.
    function myFunction () {
        var imgWidth = $("#slider_box_01").width();
        var numImgs = 16;
        var count = 0;

        slideId++;

        if (slideId == 3) {
            slideId = 0;
        }

        imageSlider(imgWidth, numImgs, count, slides, slideId);
    }

    function imageSlider(imgWidth, numImgs, count, slides, slideId) {
        var animation = setInterval(function () {
            var position = -1 * (count * imgWidth);

            $('#slider_box_01').find('.slider_image').css('margin-left', position);

            count++;

            if (count == numImgs) {
                count = 0;
                $('#slider_box_01').find('.slider_image').css('margin-left', 0);
                $(".slider_image").attr("src", slides[slideId]);
                clearInterval(animation);
            }
        }, 80);
    }

    // Call the new function every 2 seconds.
    setInterval(myFunction, 2000);
});

Upvotes: 1

Related Questions