Looping jquery setInterval

Asked

Viewed 1,666 times

3

I’m doing a slider and I need that when the images finish passing, they start again but I’m not getting it. Someone could help?

JS

              $(function(){
    // Buttons Hover Effect
    buttonsHover();

    function buttonsHover(){
        var buttons = $('.buttons');
        var container = $('#container');

        container.hover(function(){
            buttons.fadeIn();   
        }, function(){
            buttons.fadeOut();  
        });
    }
    /* ----------------------------------------------------------------------------------------------------------------------------------------- */

    // slide
    var numImages = 0;
    var currentImage = 1;
    var totalWidth = 0;
    var galleryUlLi = $('.gallery-ul li');
    var galleryUl = $('.gallery-ul');
    var leftButton = $('.left_b');
    var rightButton = $('.right_b');
    var interval = 0;

    hideButtons();
    loop();

    // images_container li class with a function to add values for each numImages and totalWidth variables
    galleryUlLi.each(function(){
        numImages++;
        totalWidth += 1200;
    });

    // images_container class with the css width value of the images
    galleryUl.css('width', totalWidth + 'px');

    // Right button click function
    rightButton.click(function(){
        moveLeft(); 
        hideButtons();
        clearLoop();
        loop();
    });

    // Left button click function
    leftButton.click(function(){
        moveRight();
        hideButtons();
        clearLoop();
        loop();
    }); 

    // Move Left function
    function moveLeft(){
        if(currentImage < numImages){
            galleryUl.animate({'margin-left': '-=1200px'}, 1000);
            currentImage++;
            hideButtons();
        }

    }

    // Move Right function
    function moveRight(){
        if(currentImage > 1){
            galleryUl.animate({'margin-left': '+=1200px'}, 1000);
            currentImage--;
            hideButtons();
        }

    }

    // function hide buttons
    function hideButtons(){
        if(currentImage === 1){
            leftButton.hide();
        }
        else{
            leftButton.show();
        }

        if(currentImage === numImages){
            rightButton.hide(); 
        }
        else{
            rightButton.show(); 
        }
    }

    function loop(){
        interval = setInterval(moveLeft, 3000);
    }

    function clearLoop(){
        clearInterval(interval);    
    }

}); // End of main function
javascript jquery loop setinterval

  • The code even shows some error or something?

  • No he just finishes the looping and doesn’t start again.

  • Have you checked if the moveleft function is running? Try placing a console.log in the loop

1 answer

2


A good way to make this logic of loops where you have a value being incremented, but at some point this value should get to the beginning is using array and a logic with module %.

Example:

$(function()
{

	var $escreve = $('#escreve');

	var valores = [
		'1 de 5',
		'2 de 5',
		'3 de 5',
		'4 de 5',
		'5 de 5'
	];


	var i = 0;

	setInterval(function()
	{	
		$escreve.html(valores[i++ % valores.length])

	}, 1000)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="escreve"></div>

Notice that I got the size of the array and I used the module calculation to pass it by capturing the array.

So:

valores = [1, 2, 3]

console.log(valores.length); // Imprime 3

var i = 0;

The results would be:

0 % 3 = 0
1 % 3 = 1
2 % 3 = 2
3 % 3 = 0 // arrays começam do "0"

Browser other questions tagged javascript jquery loop setinterval

You are not signed in. Login or sign up in order to post.