используя setInterval и jquery для переключения фонового изображения div - PullRequest
Новая
       32

используя setInterval и jquery для переключения фонового изображения div

0 голосов
/ 29 августа 2018

У меня есть этот код, который должен вращать некоторые фоновые изображения div. 

<style>

.slider{
  height: 600px;
  padding: 0;
  background-image: url('img/placeholder.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}    
</style>

<script>
$(document).ready(function(){

    var images = ['url("img/placeholder.png")',
            'url("img/img1.jpg")',
            'url("img/img2.jpg")',
            'url("img/img3.jpg")',
            'url("img/img4.jpg")'];

    $.each(images, function(i, val){
      setInterval(function(){
          $('.slider').css({backgroundImage: val});
      }, 5000);
    });

});
</script>

<div class="container-fluid">

  <div class="row slider"></div>

</div>

Проблема в том, что он покажет только последнее изображение в массиве. Можно ли это исправить, я не слишком опытен с использованием циклов javascript / jquery, поэтому я предполагаю, что проблема с кодом цикла $.each()?

1 Ответ

0 голосов
/ 04 октября 2018

Вы могли бы сделать это таким образом. 

$(document).ready(function() {

  var images = [
    'url("https://d2pu2bk1b66iw6.cloudfront.net/photos/2017/04/24/6-165890-cat-1493062781.jpg")',
    'url("https://thumbs-prod.si-cdn.com/3asSf7LmvyrY5m0-ggxJjrnd_DI=/800x600/filters:no_upscale()/https://public-media.smithsonianmag.com/filer/58/04/5804c840-3073-4ecf-a1d2-37808419fe93/gdahh5-wr.jpg")',
    'url("https://static.toiimg.com/img/60828043/Master.jpg")',
    'url("https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2015/cat.jpg")'
  ];

  var i = images.length;
  setInterval(function() {
    if (i == images.length) {
      i = 0;
    }
    $('#slider').css("background-image", images[i]);
    i++;
  }, 1000);


});
#slider {
  width: 600px;
  height: 600px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="slider"></div>

В первую секунду нет изображений, потому что нет фонового изображения по умолчанию. Вы можете просто добавить фон по умолчанию, добавив эту строку перед setInterval: 

$('#slider').css("background-image", images[images.length-1])

Таким образом, вы всегда начинаете с последнего элемента в массиве, а затем возвращаетесь к первому и продолжаете в обычном режиме. Вы можете изменить логику, это просто бонус: -)

...