Question

我在div中放置了三张背景图片。我试图让它们中的所有三个在一个淡入淡出的计时器上循环。我实际上在这里发现了类似的问题，但我不能让他们工作。无论如何，这是相关的代码：

HTML

<div id="slideshow">    
</div>

CSS

#slideshow{
position:relative;
top:0;
width:100%;
height:635px;
background:
    url("car4.jpg"),
    url("city.jpg"),
    url("host3.jpg");
background-repeat:no-repeat;
background-size:100%;
}

我希望在CSS中这样做，但我猜它需要JQUERY;我没有多少经验。但那没关系。

我真的很感激任何帮助。如果我能提供更多信息，请告诉我。谢谢。

***我试过css动画，但我没有得到结果。以下是我将其更改为：

#slideshow{
   position:relative;
   top:0;
   width:100%;
   height:635px;
   background:url("car4.jpg");
   background-repeat:no-repeat;
   background-size:100%;
   animation-name: one;
   animation-duration: 4s;
}
@keyframes one {
from {background: url("car4.jpg");}
to {background: url("city.jpg");}
}

这看起来不错，但它仍然只显示原始图像“car4.jpg” 感谢

Answer 1

尝试从css background-image值创建数组，淡入淡出，淡出第一张背景图像;从数组中删除淡出的背景图像，将删除的背景图像放在数组的最后一个索引处;将背景图像值重置为由逗号连接的数组;淡入，淡出下一个，现在第一个索引背景图像;通过淡入循环，淡出所有背景图像;递归调用函数，尝试创建“无限”淡入的显示效果，淡出“幻灯片”

$(function() {
  // set `$.fx.interval` at `0`
  $.fx.interval = 0;
  (function cycleBgImage(elem, bgimg) {
// `elem`:`#slideshow`
// set, reset, delay to `1000` after background image reset
elem.css("backgroundImage", bgimg)
  // fade in background image
  .fadeTo(3000, 1, "linear", function() {
    // set `delay` before fadeing out image
    // fade in background image        
    $(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {
      // split background image string at comma , creating array
      var img = $(this).css("backgroundImage").split(","),
        // concat first background image to `img` array,
        // remove first background image from `img` array
        bgimg = img.concat(img[0]).splice(1).join(",");
      // recursively call `cycleBgImage`
      cycleBgImage(elem, bgimg);
    });
  });
  }($("#slideshow")));
});

body {
  width: 400px;
  height: 400px;
}
/* set `#slideshow` parent background color */
.slideshow {
  background: #000;
  display:block;
  width:inherit;
  height:inherit;
}
#slideshow {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.0;
  background-color: #000;
  /* 
     set background images as `url(/path/to/image)` here, 
     separated by commas 
  */
  background-image: url("http://lorempixel.com/400/400/cats/?1"), 
    url("http://lorempixel.com/400/400/animals/?2"), 
    url("http://lorempixel.com/400/400/nature/?3"), 
    url("http://lorempixel.com/400/400/technics/?4"), 
    url("http://lorempixel.com/400/400/city/?5");
  background-size: cover, 0px, 0px, 0px;
/* set transtitions at 3000ms 
  -webkit-transition: background-image 3000ms linear;
  -moz-transition: background-image 3000ms linear;
  -ms-transition: background-image 3000ms linear;
  -o-transition: background-image 3000ms linear;
  transition: background-image 3000ms linear;
    */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="slideshow">
  <div id="slideshow"></div>
</div>

jsfiddle http://jsfiddle.net/gkjL6mdj/15/

Answer 2

从 here 的答案和@ guest271314的建议尝试为动画定义CSS 3关键帧：

#slideshow{
       position:relative;
       top:0;
       width:100%;
       height:635px;
       background:
       url("car4.jpg"),
       url("city.jpg"),
       url("host3.jpg");
       background-repeat:no-repeat;
       background-size:100%;
       -moz-animation: swim 2s linear 0s infinite;
       -webkit-animation: swim 2s linear 0s infinite;
        animation: swim 2s linear 0s infinite;
}


@-moz-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}

Answer 3

CSS

repositories {
    google()
    //....
}

JS

#background-slideshow {
    transition: background 1.5s ease; 
    background-position: center top, center top, center top; 
    background-size: cover, cover, cover;
    background-repeat:  no-repeat, no-repeat, no-repeat;
    background-image: url(img/background-1.jpg), url(img/background-2.jpg), url(img/background-3.jpg);
}

尝试通过CSS和JQUERY的幻灯片循环制作多个背景图像

3 个答案: