平滑滑动背景图像

Question

我有一个PhP页面，在那里我想设置背景图像如下。

body id="indexbody" background="<?php echo base_url(); ?>images/Images03.png" 
style="background-repeat:no-repeat;background-size:cover;position: relative;
background-size:100% 100vh;"

现在，这很好地显示了背景图像。我想让背景图像平滑地一个接一个地淡入淡出。

<script>
window.onload = function() {
var images = [
  "http://images/Images01.png",
  "http://images/Images02.png",
  "http://images/Images03.png"
]
var imageHead = document.getElementById("indexbody");

var i = 0;
$('#indexbody').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + images[i] + ')');
i = i + 1;
      if (i == images.length) {
        i =  0;
      }
}).delay(1000).fadeTo('slow', 1);
</script>

这不管用。有没有人能建议如何做到这一点。淡入淡出或从左向右滑动

Answer 1

介意使用插件吗？

this plugin worked for me