Question

我正在尝试使用JQUERY创建一个脚本，该脚本每5秒更改一次背景图像。问题是，我无法将图像全屏显示。我遇到的其他问题是一个图像淡出，所以其他图像可以淡入，但两者之间有一个白色空间。有没有办法在淡出的同时开始淡出？

$(window).load(function() {           
  var i = 0; 
  var images = ['geral2.jpg','geral3.jpg','geral4.jpg','geral5.jpg','geral6.jpg'];
  var image = $('#slideit');
  image.css('background', 'url(geral1.jpg) no-repeat center center fixed');
  setInterval(function(){           
    image.fadeOut(1000, function () {
      image.css('background', 'url(' + images [i++] +') no-repeat center center fixed');
      image.fadeIn(1000);
    });
    if(i == images.length)
      i = 0;
  }, 5000);
});

http://codepen.io/Ryuh/pen/dXYzoM

Answer 1

查看此资源：https://vegas.jaysalvat.com/它是一个背景滑块，可以拉伸全屏（无论是宽度还是长度），并且具有您正在寻找的淡入淡出效果。

访问您要在此处更改/更改的所有设置：http://vegas.jaysalvat.com/documentation/settings/

易于设置，看起来很棒。所有代码都可以下载。

代码看起来很简单：

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    transition: 'fade'
});

万一以上链接腐烂，您可以随时通过此链接从github分叉/下载：https://github.com/jaysalvat/vegas/

全宽图像，淡出时淡入淡出

1 个答案: