背景图切换

<div class="home-alication" data-bg-img="">
    <div class="max1700 clearfix">
        <div class="hm-title hm-title2 text-center">
            <div class="put1">应用领域</div>
            <div class="put2 flex a-center j-center"><i></i><em></em><i></i></div>
            <div class="put3">我们支持专业生产钢丝绳、钢丝绳索具、试验服务等各种规格</div>
        </div>
        <ul class="alication-list">
            {% for value in app('section').id('43761') %}
            <li data-img="{{ value.img[0] }}">
                <a href="javascript:;">
                    <h3>{{ value.name }}</h3>
                    <p>{{ value.fname }}</p>
                </a>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

<script>
    $(document).ready(function() {
        // 获取默认背景图的URL
        var defaultBgUrl = $('.alication-list li:first-child').data('img');
        // 设置默认背景图
        $('.home-alication').css('background-image', 'url(' + defaultBgUrl + ')');

        $(".alication-list li").eq(0).addClass('on');
       
        // 鼠标移入事件
        $('.alication-list li').mouseenter(function() {
            var _id = $(this).index();
            $(this).addClass('on').siblings().removeClass('on');

            // 获取当前li的背景图URL
            var bgUrl = $(this).data('img');
            // 设置.home-alication的背景图，并添加过渡效果
            $('.home-alication').css({
                'background-image': 'url(' + bgUrl + ')',
                'transition': 'background-image 0.5s ease-in-out'
            });
        });
    });
</script>


.home-alication{position:relative;background-size:cover;height: 44.27083vw;padding-top: 5.2083vw;}
.hm-title{position: relative;}
.hm-title .put1{font-size: 2.2916vw;color: #333333;font-weight: bold;}
.hm-title .put2{margin: 15px 0;}
.hm-title .put2 i{width: 90px;height: 2px;background: #d6151b;}
.hm-title .put2 em{background: url(//cdn.myxypt.com/e5f43f38/24/04/cef91178d1421d17c462bdc8309975e109f8a9ac.png) no-repeat center;width: 20px;height: 20px;margin: 0 10px;}
.hm-title .put3{font-size: 0.9375vw;color: #333333;}
.hm-title2{margin-bottom: 7.8125vw;}
.hm-title2 *{color: #fff!important}
.alication-list{display:flex;flex-wrap:wrap}
.alication-list li{flex:1;text-align:center;position:relative}
.alication-list li+li{border-left:2px solid rgba(255,255,255,.4)}
.alication-list li a{display:block}
.alication-list li h3{font-size:1.0416vw;font-weight:400;color:rgba(255,255,255,.6);margin-bottom: 10px;}
.alication-list li p{font-size:0.8333vw;font-weight:400;color:rgba(255,255,255,.6);}
.alication-list li.on *{color: #fff!important;}