Javascript 幻灯片更改时更改主体背景色/图像

我使用的是响应革命的jqueryslider（），我试图实现一种效果，即幻灯片改变时身体背景颜色/图像会改变

这些是我得到的：

HTML:

现在，当幻灯片1出现时，我需要一个绿色主体背景（#D5E24D），当幻灯片2出现时，我需要一个背景图像（abc.jpg）

---

我应该如何编写JS？我是JS的新手，非常感谢您的帮助

您应该为新背景颜色/图像向li添加数据属性，然后使用设置背景谢谢Pete！我也知道revolution.slide.onchange是一个不错的选择，但我不知道如何在JS中实现它。你应该为新的背景色/图像向你的li添加一个数据属性，然后使用设置背景谢谢你，皮特！我也知道revolution.slide.onchange是一个不错的选择，但我不知道如何在JS中实现它。

<div class="slider-wrap">
        <div class="fullwidthbanner-container" >
            <div class="fullwidthbanner">
                <ul>  
                        <!-- MAIN IMAGE-->
                        <li data-transition="fade, fade" data-slotamount="1" data-masterspeed="1400"  data-saveperformance="off" >
                        <img src="img/web-banner-final-1.png" id="slide1" alt="bg"  data-bgposition="left top" data-bgfit="contain" data-bgrepeat="no-repeat">
                        </li>
                        <!-- SLIDE  2-->
                        <li data-transition="fade, fade" data-slotamount="1" data-masterspeed="1400"  data-saveperformance="off" >
                        <img src="img/web-banner-final-2.png" alt="bg" id="slide2" data-bgposition="left top" data-bgfit="contain" data-bgrepeat="no-repeat">
                        </li>
                </ul>
            </div>
        </div>
    </div>