0

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

之前它工作得很好，在我更改 css 之后，它的行为很奇怪，我使用背景附件固定，所以当用户滚动时看起来滑块背景没有滚动，效果很好，但我把它们都放在了一个滑块。我将背景属性放在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>

4

1 回答 1

0

您的代码几乎没有问题。

  • 示例代码缺少.hero您在 javascript 和 css 中定位的类。我添加了那个 html 包装器。

  • 图片的相对路径不起作用，因为演示用绝对 URL 替换了它。

  • 重构了 javascript，因为有多个slider-background我们需要检查每一个并使用其中的 data 属性值进行样式设置。

运行下面的代码片段以查看它的实际效果。

// setup closure and create app object
var app = (function($) {
  var module = {};

  // expose functions as methods
  module.setDataBackground = setDataBackground;

  function setDataBackground(container) {
    const $container = $(container);
    $container.each(function() {
      const imageAttr = $(this).data('src');
      if (imageAttr) {
        $(this).css('background-image', `url(${imageAttr})`);
      }
    });
  }

  // return final object
  return module;
})(jQuery);

// change bg
app.setDataBackground('.hero .slider-background');
.hero .slider .slider-background {
  width: 100%;
  height: 100vh;
  display: block;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero">
  <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="https://placeimg.com/480/360/animals"></div>
        </div>
        <div class="slider-item tns-item tns-slide-active" id="tns1-item0">
          <div class="slider-background" data-src="https://placeimg.com/480/360/arch"></div>
        </div>
        <div class="slider-item tns-item" id="tns1-item1" aria-hidden="true" tabindex="-1">
          <div class="slider-background" data-src="https://placeimg.com/480/360/nature"></div>
        </div>
        <div class="slider-item tns-item" id="tns1-item2" aria-hidden="true" tabindex="-1">
          <div class="slider-background" data-src="https://placeimg.com/480/360/people"></div>
        </div>
        <div class="slider-item tns-item" aria-hidden="true" tabindex="-1">
          <div class="slider-background" data-src="https://placeimg.com/480/360/tech"></div>
        </div>
      </div>
    </div>
  </div>
</div>

于 2020-04-24T22:12:06.230 回答