尝试使用 CSS 和 JQUERY 使多个背景图像循环播放幻灯片

问题描述

我在一个 div 中放置了三个背景图像.我试图让他们三个都在一个淡入淡出的计时器上循环.我实际上在这里找到了类似的问题，但我无法让它们工作.无论如何，这是相关的代码:

I've placed three background images in a div. I'm trying to make all three of them cycle through on a timer that fades in and out. I've actually found similar quesitons on here, but I cannot get them to work. Anyway, here's the relevant code:

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;我没有太多经验.不过没关系.

I'm hoping to do this in CSS, but I'm guessing it requires JQUERY; which I don't have much experience in. But that's OK.

非常感谢任何帮助.让我知道我是否可以为您提供更多信息.谢谢.

I'd really appreciate any help. Let me know if I can give you any more information. Thank you.

*** 我尝试过 css 动画，但没有得到结果.这是我将其更改为:

*** I've tried css animations but I didn't get the results. Here's what I changed it to:

#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"谢谢

This looks correct, but it still only showing the original image "car4.jpg"Thanks

推荐答案

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

Try creating array from css background-image value , fading in , fading out first background image ; removing faded out background image from array , placing removed background image at last index of array ; resetting background image value to array joined by comma; fading in , fading out next , now first indexed background image ; cycling through fading in , fading out all background images ; recursively calling function , to attempt to create displayed effect of an "infinite" fade in , fade out "slideshow"

$(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/

这篇关于尝试使用 CSS 和 JQUERY 使多个背景图像循环播放幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！