0

Olá, tenho um js que faz uma lista de imagens avançarem e retrocederem com base em uma variável, ela avança perfeitamente, porém para voltar ela volta aleatoriamente. Alguém pode me ajudar a resolver? o código está abaixo:

var imgs = [
  'produtos/Slide92.png',
  'produtos/Slide93.png',
  'produtos/Slide94.png',

];
var num_imgs = 1;
var next_three = num_imgs;
var prev_three = 0;
var next_imgs, prev_imgs;
for(var i = 0; i < next_three; i++) {
    $('#galery').append('<img class="imgDinamica" src="' +imgs[i]+ '">');
}
$('#next').on('click', function() {
  next_imgs = imgs.slice(next_three, next_three + num_imgs);
  if(next_imgs.length === 0) {
    next_three = 0;
    next_imgs = imgs.slice(next_three, next_three + num_imgs);
  }
  $('.imgDinamica').each(function() {
    if(typeof next_imgs[$(this).index()] === 'undefined') {
        $(this).hide();
        return true; // continue
    }
    $(this).show();
    $(this).prop('src', next_imgs[$(this).index()]);
  });
  next_three += num_imgs;
});

$('#prev').on('click', function() {
    prev_imgs = imgs.slice(prev_three - num_imgs, prev_three);
  console.log(prev_three);
  if(prev_imgs.length <= 0) {
        prev_three = imgs.length;
    prev_imgs = imgs.slice(prev_three - num_imgs, prev_three);
  }
  $('.imgDinamica').each(function() {
    if(typeof prev_imgs[$(this).index()] === 'undefined') {
        $(this).hide();
        return true; // continue
    }
    $(this).show();
    $(this).prop('src', prev_imgs[$(this).index()]);
  });
  prev_three -= num_imgs;
});

O código original é esse: https://jsfiddle.net/bwoep3wL/2/

2 Respostas 2

1
  1. #next.click não atualiza prev_three nem #prev.click atualiza next_three;

  2. prev_three não esta a ser corretamente inicializado:

    var prev_three=imgs.length-imgs.length%num_imgs;

  3. algoritmo no geral.

Sugiro a utilização de uma única variável de posição, modificada de acordo com o movimento:

var imgs = [...];

var num_imgs = 3;
var cur_img = 0;

function upd_imgs(index, count) {
  //Garantir que existem count elementos
  while($('.img_change').length<count) $('#imgs_wrapper').append("<img class='img_change'>");
  //Corrigir count se superior a elementos disponíveis
  if (index+count>imgs.length) count=imgs.length-index;
  $('.img_change').each(function() {
    if ($(this).index()>=count) {
      //Ocultar elementos extra contagem
      $(this).hide();
    } else {
      //Atualizar src e mostrar imagens
      this.src=imgs[index+$(this).index()];
      $(this).show();
    }
  });
}

//Primeira atualização
upd_imgs(cur_img, num_imgs);

$('#next_imgs').on('click', function() {
  cur_img=cur_img+num_imgs;
  if (cur_img>=imgs.length) cur_img=0;
  upd_imgs(cur_img, num_imgs);
});

$('#prev_imgs').on('click', function() {
  cur_img=cur_img-num_imgs;
  if (cur_img<0) cur_img=imgs.length-imgs.length%num_imgs;
  upd_imgs(cur_img, num_imgs);
});
1
1

Creio que haja uma solução mais simples do que isso. caso você crie os elementos que simbolizem cada item do slideshow, (o que fica mais leve depois de processado), provavelmente você terá uma estrutura como essa:

https://jsfiddle.net/tq6gen43/4/

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 .