JQuery повторяет установленное значение после завершения функции - PullRequest
Новая
       7

JQuery повторяет установленное значение после завершения функции

0 голосов

В этом скрипте я хочу показать изображение под номером 0,1,2 и повторять каждый раз, проблема в том, что следующее изображение будет показано до конца анимации и переходного изображения. 

var n_img_s = 2;
i = 0;

function more_slider() {
  if (i > n_img_s) {
    i = 0;
  }
  jQuery(".img_" + i).show(3000).delay(3000);
  jQuery(".img_" + i).hide(2000).delay(1500);
  i++;
}

setInterval("more_slider()", 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slider_cover">
  <img src="https://images.pexels.com/photos/6602/food-plate-woman-hand.jpg?auto=compress&cs=tinysrgb&h=350" style="display:none;" class="img_0" />
  <img src="https://images.pexels.com/photos/6602/food-plate-woman-hand.jpg?auto=compress&cs=tinysrgb&h=350" style="display:none;" class="img_1" />
</div>

Мне нужно, например, показать изображение 0, скрыть конец и в этот момент показать следующее изображение, но не до конца другого изображения.

Но я не знаю, как интегрировать setInterval в это.

Спасибо за помощь.

1 Ответ

0 голосов
/ 16 мая 2018 

//get all the images
var $images = $('#slider_cover img');

//accept in the next image index to show
function more_slider(nextImageIndex) {
  //get the image you should show, using eq()
  //so the element will still be in a jQuery object
  var $nextImage = $images.eq(nextImageIndex);
  
  //show the image, and then do something after the duration ends
  $nextImage.show(3000, function(){
    //hide the image, and then do something after the duration ends
    $nextImage.hide(2000, function(){
      //pass in the incremented index, performing a modulus
      //on it so that if the length is equal to the number
      //of images it will go back to 0
      more_slider(++nextImageIndex % $images.length);
    });
  });
}

//initialize the loop, giving it the first image index to show
more_slider(0);
.img_0 { border: 2px solid red; }
.img_1 { border: 2px solid blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slider_cover">
  <img src="https://images.pexels.com/photos/6602/food-plate-woman-hand.jpg?auto=compress&cs=tinysrgb&h=350" style="display:none;" class="img_0" />
  <img src="https://images.pexels.com/photos/6602/food-plate-woman-hand.jpg?auto=compress&cs=tinysrgb&h=350" style="display:none;" class="img_1" />
</div>
...