3

Estou fazendo um slider e preciso que, quando as imagens terminem de passar, elas comecem de novo mas não estou conseguindo. Alguem poderia ajudar?

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
3
  • O código chega a apresentar algum erro ou algo do tipo? Commented 25/11/2015 às 11:25
  • Não ele simplesmente termina o looping e não recomeça. Commented 25/11/2015 às 12:44
  • Você verificou se a função moveleft está sendo executada? Tente colocar um console.log no loop Commented 25/11/2015 às 13:30

1 Resposta 1

2

Uma boa forma de fazer essa lógica de loops onde você tem um valor sendo incrementado, porém em algum momento esse valor deve chegar ao início é utilizando array e uma lógica com módulo %.

Exemplo:

$(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>

Perceba que eu peguei o tamanho do array e utilizei o cálculo do módulo, para que o mesmo seja passado por captura do índice do array.

Sendo assim:

valores = [1, 2, 3]

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

var i = 0;

Os resultados seriam:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .