Materialise carousel onchange jquery 改变背景

Question

$(document).ready(function() {
    $('.carousel').carousel();
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: 0;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    background-color: #000000;
}

.carousel {
    height: 700px;
    -webkit-perspective: 600px;
            perspective: 600px;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.carousel .carousel-item {
    cursor: -webkit-grab;
    cursor: grab;
    width: 400px;
}

.carousel .carousel-item:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.carousel .carousel-item img {
    width: 100%;
}

.carousel .carousel-item h3 {
    background-color: #ffffff;
    color: #000000;
    font-size: 2em;
    font-weight: bold;
    margin: -5px 0 0;
    padding: 10px 5px;
    text-align: center;
}

<div class="carousel">
    <div class="carousel-item">
        <img src="./img/gry1.png" alt="Dog" title="Dog" id="Dog">
    </div>
    
    <div class="carousel-item">
        <img src="./img/img1.png" alt="Cat" title="Cat" id="Cat">
    </div>
    
        <div class="carousel-item">
        <img src="./img/img1.png" alt="Wolf" title="Wolf" id="Wolf">
    </div>
    
        <div class="carousel-item">
        <img src="./img/img1.png" alt="Tiger" title="Tiger" id="Tiger">
    </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js'></script><script  src="./script.js"></script>

我想更改轮播中每个项目的背景，实现为轮播中 selected 项目添加“活动”class，但我不知道如何更改背景（对于整个页面），我试图为每个项目添加背景图像 css 但它没有覆盖整个页面背景。

我认为通过jquery解决它会很好（检查哪个项目是“活动的”和select该项目的背景，将其添加到正文class）

codepen 上可用的相同脚本： https://codepen.io/crianbluff/details/PMZBVJ

Answer 1

你可以这样做。

我添加了包含 image-url 的虚拟数据，并在 HTML 中添加了 carousel-item--* 类。

const setBackground = () => {
    const number = document.querySelector('.carousel-item.active').classList[1].split('--')[1];
    document.body.setAttribute('style', `background-image: url("${dummy[number]}")`);
}

在数字变量中，我正在获取 carousel-item--* 数字并通过索引获取虚拟数据的 image-url 并通过 javascript

添加 background-image

代码笔：https://codepen.io/NishargShah/pen/oNzwGwx?editors=1010

Materialise carousel onchange jquery 改变背景

Materialize carousel onchange jquery change bg

css

materialize