Question

我正在尝试使多个图像（3）作为视差背景淡入和淡出。我当前使用的是大型动画gif，由于加载时间以及最终所需的内容，因此无法将其剪切。我正在尝试定位一个已经完成但似乎无法更改图像的“数据背景”属性。我可以将其输出到控制台，但不能输出数据背景。下面是代码。

谢谢！

<section id="paralax-image" style="height: 400px;" class="module-cover parallax" data-background="" data-overlay="1"
        data-gradient="1">


(function () {

// The images array.
var images = ["assets2/Arcadian.jpg", "assets2/AngryPrawns.jpg", "assets2/Apricot_Smash.jpg"];

// The counter function using a closure.
var add = (function() {
    // Setting the counter to the last image so it will start with the first image in the array.
    var counter = images.length - 1;
    return function() {
        // When the last image is shown reset the counter else increment the counter.
        if(counter === images.length - 1) {
            counter = 0;
        } else {
            counter+=1;
        }
        return counter;
    }
})();

// The function for changing the images.
setInterval(
    function() {
      var section = document.getElementById("paralax-image");
      section.getAttribute("data-background");
        section.setAttribute('data-background', images[add()]);
        console.log(images[add()]);
    }
, 3000);

})();

Answer 1

首先，前面带有“ data-”的属性仅用于在元素上存储一些自定义数据。这些属性不会以任何方式影响应用程序的外观/行为，除非您在JS / CSS中使用它们。

因此，在您的代码中，您正在部分中设置data-background属性。代码运行正常，如果检查检查器，您实际上可以看到该属性的值正在按预期方式更改。

下一步是使用JS或CSS显示在data-background属性中设置的图像。

不幸的是，就目前而言，尚无法从CSS的属性值中获取背景URL，如此处投票最高的答案所述：Using HTML data-attribute to set CSS background-image url

但是，您仍然可以使用JavaScript基于“ data-”属性来手动设置CSS背景图像属性。

// The images array.
const images = ["https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350", "https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350", "https://images.unsplash.com/photo-1530482817083-29ae4b92ff15?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=44f4aebbd1e1371d5bf7dc22016c5d29&w=1000&q=80"];


const imagesSwitcher = () => {

	const getCounter = () => {
    // Setting the counter to the last image so it will start with the first image in the array.
    let counter = images.length - 1;
    return () => {
        // When the last image is shown reset the counter else increment the counter.
        if(counter === images.length - 1) {
            counter = 0;
        } else {
            counter += 1;
        }
        return counter;
    }
	}
  
  const counter = getCounter();
  
  const updateBackground = () => {
			const section = document.getElementById("paralax-image");
      
      section.style.background = `url(${images[counter()]}) no-repeat`;
      
	};
  
	updateBackground();
	setInterval(() => updateBackground(), 3000);
};

imagesSwitcher();

.dynamic-background {
  display: block;
  width: 500px;
  height: 200px;
  background-size: 100%;
}

<div>
  <section id="paralax-image" class="dynamic-background" style="height: 400px;" class="module-cover parallax" data-background="" data-overlay="1" data-gradient="1">
  </section>
</div>

问题是-在这种情况下，您甚至实际上不需要此data-background属性。您只需使用JS即可切换背景图片。

现在，还不清楚您所说的视差是什么意思。如果您实际上是在此处http://jsfiddle.net/Birdlaw/ny8rqzu5/中表示视差背景，则需要整体采用其他方法。如果您需要任何帮助，请发表评论。

为视差背景添加滚动图像

1 个答案: