时间戳

首页 > 解决方案 > 根据滑块滑翔机js中的活动li值更改css值

javascript - 根据滑块滑翔机js中的活动li值更改css值

问题描述

想要根据活动滑翔机 js li 值更改 css html 背景图像

这是CSS

html { 
  background-image: url("https://images.unsplash.com/photo-1496518908709-02b67989c265?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

我正在使用 Glider.js 所以当当前幻灯片在框架中时，一个类 glide__slide--active 被添加到

  • <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide" data-image-value="https://bob.com/image/bigimage1.jpg">01</li>
      <li class="glide__slide glide__slide--active" data-image-value="https://bob.com/image/bigimage2.jpg" >02</li>
      <li class="glide__slide" data-image-value="https://bob.com/image/bigimage3.jpg">03</li>
    </ul>
</div>

    所以使用jquery更改背景图片的url，值为data-image-value

    • 标签： javascriptjquerycss

    解决方案

    根据glidejs 文档的事件部分，您可以收听过渡结束，如：

    glide.on('move.after', function(event) {
    // store the background in a variable
    var newBG = $('.glide__slide--active').attr('data-image-value');
    // apply the background image to the element (html or body...whatever you're using)
    $('body').css('background-image', 'url(' + newBG + ')');
});

    没有看到一个可重复的例子，这就是我能为你做的最好的事情。更多代码会有所帮助。

    推荐阅读