Question

目前我正在使用此代码在我的主页上创建幻灯片：

var images = [
    "/d/assets/images/IT/homepage/slider-1.jpg",
    "/d/assets/images/IT/homepage/slider-2.jpg",
    "/d/assets/images/IT/homepage/slider-3.jpg",
    "/d/assets/images/IT/homepage/slider-4.jpg",
    "/d/assets/images/IT/homepage/slider-5.jpg",
];

var imageHead = document.getElementById( "slider-home" );
var i = 0;

setInterval(function() {
  $('#slider-home').fadeOut(200,
    function() {
      imageHead.style.backgroundImage = "url(" + images[i] + ")";
      i = i + 1;
      if (i == images.length) {
        i = 0;
      }
      $('#slider-home').fadeIn(200)
     }
    );

  }, 5000);

代码完美运行，每5秒更改一次背景图像。不幸的是，在每次更改之间都有一个小的白色背景，并且转换似乎不像主页中的Ryanair幻灯片那样“干净”和“流畅”：https://www.ryanair.com/it/it/

产生此问题的问题在哪里以及如何解决？

Answer 1

试试这个例子 https://codepen.io/dudleystorey/pen/ehKpi

无需为此编写JS。但是通过CSS它是可能的。

CSS：

animation: 30s slidy infinite;

设置属性＆＃34;动画：30s滑动无限;＆＃34; （更改滑块中图像的秒数。）

Answer 2

您将一张图片淡出，等待该过渡完成，然后淡入下一张图像。这样就可以有效地过渡到图像之间的页面背景。

通过堆叠两个元素并在它们之间进行转换来同时进行这些转换会有所帮助，但它仍然不会是完美的：在转换过程中，当两个图像都是部分透明的时候，你仍然会看到背景。 p>

相反，为了顺利过渡，只需淡出＆＃34;顶部＆＃34;堆栈中的图像，揭示其背后的一个：

＆＃13;

UPDATE schema_vals
        SET schema_value = 
        CASE 
        When schema_name = 'sitename' THEN '$siteame'
        When schema_name = 'street' THEN '$stret' 
        When schema_name = 'city' THEN '$cit'
        When schema_name = 'State' THEN '$sate'
        When schema_name = 'zipcode' THEN '$ipcode'
        When schema_name = 'phone' THEN '$pone'
        When schema_name = 'fax' THEN '$fx'
        When schema_name = 'social' THEN '$ocial'
        ELSE schema_value
        END;

＆＃13;

yourswap = function() {
  if ($('#div1').is(':visible')) {
    fadeout = "#div1";
    fadein = "#div2";
  } else {
    fadeout = "#div2";
    fadein = "#div1";
  }
  // fade one out, then fade the other in
  $(fadeout).fadeOut(function() {
    $(fadein).fadeIn()
  });
}

badswap = function() {
  $('#div1, #div2').fadeToggle(); // transitions both elements in and out
}

goodswap = function() {
  $('#div1').fadeIn(0); // make sure the background element is visible
  $('#div2').fadeToggle(); // transitions the top element in and out
}

＆＃13;

.block-div {
  position: absolute;
  height: 200px;
  width: 400px;
  color: #fff;
  font-size: 40px;
  text-align: center;
}

.container {
  position: relative
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: brown;
  display: none;
}

#div3 {
  background-color: blue
}

＆＃13;

fadeOut（）和fadeIn（）期间的白色背景

2 个答案: