时间戳

首页 > 解决方案 > 使用 setInterval 和 jquery 切换 div 的背景图像

jquery - 使用 setInterval 和 jquery 切换 div 的背景图像

问题描述

我有这段代码应该旋转 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()循环代码上？

标签： jqueryloopseach

解决方案

你可以这样做。

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

这样，您将始终从数组中的最后一个元素开始，然后返回第一个元素并正常继续。你可以改变逻辑，这只是一个奖励:-)

推荐阅读