jquery - WP 主题中的背景图像 slider - 父元素不透明度隐藏内容

Question

我正在尝试在 wp 主题中创建一个背景图像 slider ，而无需深入代码模式。所以，我环顾四周，发现了这个 solution .

到目前为止我做了什么:

1 - 向可视化编辑器中的行添加了一个 Id

2 - 将此 CSS 添加到主题自定义 CSS:

#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;
    */
}

3 - 上传包含此函数的 js 文件:

jQuery(function($) {
  // set `$.fx.interval` at `0`
  $.fx.interval = 0;
  (function cycleBgImage(elem, bgimg) {
// `elem`:`#slideshow:after`
// 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")));
});

一切正常。

问题是什么:当这个函数改变父元素的不透明度时，子元素(div)也会消失。

所以:

1 - 我在其他问题中看到了吗answer我可以更改此功能以使其开始使用 RGBA 而不是不透明度吗？

2 - 我在 another answer 中看到我们可以用一个伪元素来解决这个问题，但我有点不知道如何改变函数来像那样工作……有什么想法吗？

3 - 有更好的方法吗？

谢谢。

Answer 1

所以，为了争论，我在 response 中找到了一个解决方法另一个问题。

@ gibberish发布此代码:

$(document).ready(function() {
    var cnt=0, bg;
    var $body = $('body');
    var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];

    var bgrotater = setInterval(function() {
        if (cnt==5) cnt=0;
        bg = 'url("' + arr[cnt] + '")';
        cnt++;
        $body.css('background-image', bg);
    }, 1000);

    //To stop the backgrounds from rotating. Note the critical step above
    //of assigning the setInterval function to a variable, in order to
    //use it again (below) to stop the repeating function
    $('#some_button_id').click(function() {
        clearInterval(bgrotater);
    });

}); //END document.ready

我只是将“正文”更改为“#slideshow”，并为我的图片创建正确的链接。

效果非常好。

我发布的两个选项均无效:

1 - RGBA 选项 - A 不影响背景图像。

2 - 选择伪元素 - As Blazemonger在这说response :

You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript.