在parallax.js中更改视差图像

时间:2015-03-12 21:10:07

标签: javascript jquery html parallax parallax.js

有什么方法可以在事件发生时更改我的视差图像吗?我正在使用parallax.js而我似乎无法找到方法。

这是HTML:

<div class="bg-page-index">
  img_link_1
</div>
<div class="bg-page-index">
  img_link_2
</div>
<div class="bg-page-index">
  img_link_3
</div>



<div id="hero">
  <div class="product-color-list">
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
  </div>
</div>

JS:

$(".color").click(function() {

      var indexNum = $(".product-color-list .color").index(this);

      sliderInit(indexNum);

});

var   $hero  = $("#hero"),
      $bg_index = $(".bg-page-index"),
      bg_init = $bg_index.eq(indexNum).html();

$hero.parallax({
  imageSrc: bg_init,
  speed: 0.7
});

这是第一次使用,但它第二次不能工作,因为parallax.js库使用元素改变了一些东西。有没有人知道更好的方法,或者如何重新启动库?

1 个答案:

答案 0 :(得分:2)

我找到了一个有效的解决方案。而不是每次我想要更改背景时重新启动插件我只是在这个插件创建的元素中更改了图像src:

$('.parallax-slider').attr('src', background);