Question

我有一个＆＃34; .jumbotron＆＃34;我只需要用计时器来改变背景图像。我试图用JQuery来管理它，但脚本不起作用。这是它：

var imgHead = [
    'cover.jpg',
    'cover1.jpg',
    'cover2.jpg'
];
function Jumbotron(){
    if(i > (imgHead.length - 1)){
        $('.jumbotron').animate({'opacity': '0'}, 200, function(){
            i = 1;
            $('.jumbotron').css('background-image', 'url("+imgHead[0]+")');
        });
        $('.jumbotron').animate({'opacity': '1'}, 200);
    } else {
        $('.jumbotron').animate({'opacity': '0'}, 200, function(){
            $('.jumbotron').css('background-image', 'url("+imgHead[i]+")');
            i++;
        });
        $('.jumbotron').animate({'opacity': '1'}, 200);
    };
};
var intervalJumbotron = setInterval(Jumbotron, 3000);

Answer 1

我在评论中说的问题是分配背景图像值时的字符串连接。

＆＃13;

var imgHead = [
  '//placehold.it/64X64/ff0000',
  '//placehold.it/64X64/00ff00',
  '//placehold.it/64X64/0000ff'
];
var i = 0;

function Jumbotron() {
  if (i >= imgHead.length) {
    i = 0;
  }
  $('.jumbotron').animate({
    'opacity': '0'
  }, 200, function() {
    $(this).css('background-image', 'url("' + imgHead[i++] + '")').animate({
      'opacity': '1'
    }, 200);
  });

};
var intervalJumbotron = setInterval(Jumbotron, 3000);

Jumbotron();

＆＃13;

.jumbotron {
  height: 64px;
  background-repeat: no-repeat;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron"></div>

＆＃13;

使用JQuery更改背景图像

1 个答案: