Question

我试图在wp主题中创建一个背景图片滑块，而不需要深入代码模式。所以，我环顾四周，找到了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

我只是改变身体＆＃34;到＆＃34;＃幻灯片＆＃34;并为我的图像制作正确的链接。

它非常好用。

我发布的两个选项都没有工作：

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

2 - 选择伪元素 - 在此Blazemonger中说response：

你无法操纵：之后，因为它在技术上不是DOM的一部分，因此任何JavaScript都无法访问它。

WP主题中的背景Img滑块 - 父元素不透明度隐藏内容

1 个答案: