使用jQuery更改元素背景图片不适用于固定背景附件

我在这里遇到了一个奇怪的问题,基本上我只想制作一个滑块,每个滑块项都有一个名为子滑块背景的内部子对象,它包含图像url / path的data-src自定义属性,然后我使用jQuery来更改背景-每个滑块背景的图像均来自每个滑块背景的“ data-src”属性值。

稍早它就可以正常工作,在我更改了css tho之后,它的行为很怪异,我使用固定的背景附件,因此当用户滚动鼠标时看起来好像滑块背景没有滚动,效果不错,但是我将它们全部放在滑块。我将背景属性放在css端,并且仅通过jquery动态更改图像,当我使用“固定”时,我得到的只是空白灰色(默认背景),但是当我使用“固定”以外的任何背景附件时图像背景显示正确。这是为什么?

我在做同样的事情,使用相同的微型滑块,但是使用了香草js,这很好,相同的原理,但是这个,一个需要使用jQuery的新项目,只是空白。

请帮助,请参阅下面的代码。谢谢!

var app = function() {

  // change bg
  app.setDataBackground('.hero .slider-background')

  // methods
  setDataBackground: function(container) {
		if (jQuery(container).attr('data-src') != null) {
			jQuery(container).css('background-image', 'url('+jQuery(container).attr('data-src')+')')
		}
	}
}
.hero .slider .slider-background {
    width: 100%;
    height: 100vh;
    display: block;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
<div id="tns1-mw" class="tns-ovh">
<div class="tns-inner" id="tns1-iw"><div class="slider slider-hero  tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" id="tns1" style="transition-duration: 0s; transform: translate3d(-20%, 0px, 0px);"><div class="slider-item tns-item" aria-hidden="true" tabindex="-1">
			<div class="slider-background" data-src="../../images/placeholder-bg3.jpg" alt="" style="background-image: url(&quot;../../images/placeholder-bg3.jpg&quot;);"></div>
		</div>
		<div class="slider-item tns-item tns-slide-active" id="tns1-item0">
			<div class="slider-background" data-src="../../images/placeholder-bg1.jpg" alt="" style="background-image: url(&quot;../../images/placeholder-bg1.jpg&quot;);"></div>
		</div>
		<div class="slider-item tns-item" id="tns1-item1" aria-hidden="true" tabindex="-1">
			<div class="slider-background" data-src="../../images/placeholder-bg2.jpg" alt="" style="background-image: url(&quot;../../images/placeholder-bg2.jpg&quot;);"></div>
		</div>
		<div class="slider-item tns-item" id="tns1-item2" aria-hidden="true" tabindex="-1">
			<div class="slider-background" data-src="../../images/placeholder-bg3.jpg" alt="" style="background-image: url(&quot;../../images/placeholder-bg3.jpg&quot;);"></div>
		</div>
	<div class="slider-item tns-item" aria-hidden="true" tabindex="-1">
			<div class="slider-background" data-src="../../images/placeholder-bg1.jpg" alt="" style="background-image: url(&quot;../../images/placeholder-bg1.jpg&quot;);"></div>
		</div></div></div></div>
评论