banner_change

功能描述

实现Banner切换时其背景(色)图片相应切换。

依赖的插件

快速使用

    1.需要建2个swiper 1个是背景1个banner 以下是说明
    <!-- Swiper-bgpic 背景对应的图片-->
        <div class="swiper-container" id="bannerbgpic">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./image/default_headerbg.png" width="100%" /></div>
                <div class="swiper-slide"><img src="./image/headerbg1.png" width="100%" /></div>
            </div>
        </div>
        <!-- Swiper-banner- banner对应图片->
        <div class="swiper-container" id="bannerpic">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./image/default_banner.png" width="100%" /></div>
                <div class="swiper-slide"><img src="./image/banner1.png" width="100%" /></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
     2.初始化swiper

具体可以看示例

特别说明

swiper具体的参数和方法可参考官方

是否仍需要帮助? 请保持联络!
最后更新于 2024/11/18