Looping jquery setInterval

Question

Looping jquery setInterval

Navigation

#1 by (1 votes)

3

I'm making a slider, and I need it to start again when I see the images, but I can not. Could someone 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

asked by anonymous 24.11.2015 / 23:41

1 answer

Property of a class that belongs to another context in the Entity Framework Problem creating Android Studio project on Ubuntu

score 1 · Accepted Answer

A good way to do this loops logic where you have a value being incremented, but at some point this value should arrive at 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><divid="escreve"></div>

Notice that I have taken the size of the array and used the calculation of the module, so that it is passed by capture of the index of array .

Thus:

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"