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>

这不起作用。任何人都可以建议如何做到这一点。 fadein fadeout或从左到右滑动

Answer 1

介意使用插件？

this plugin worked for me

光滑的滑动背景图像

1 个答案: