orico-official-website/app/index/view/pc/topic_laptop/index.html

{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/topic_laptop/swiper.css">
{/block}
{block name="main"}
<!-- 轮播核心容器 -->
<img src="./img/banner1.png" alt="测试" href="https://www.baidu.com" style="width: 200px;height:200px">
<div class="swiper-container auto-swiper-container">
    <div class="swiper-wrapper">
        <a class="swiper-slide auto-swiper-slide">
            <img src="./img/banner1.png" alt="测试" href="https://www.baidu.com">
        </a>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    //轮播图
     let swiper=null;
     window.onload = function ()
    {
        if (typeof Swiper === 'undefined') {
            console.error('Swiper加载失败，请刷新页面重试');
            return;
        }
        swiper = new Swiper('.auto-swiper-container', {
            autoplay: {
                delay: 3000, // 调整为3秒切换，更友好
                disableOnInteraction: false,
            },
            loop: false,
            slidesPerView: 1,
            spaceBetween: 0,
            pagination: false,
            navigation: false,
            scrollbar: false,
            on: {
                resize: function ()
                {
                    this.update();
                },
            },
        });
        window.addEventListener('resize', function ()
        {
            swiper.update();
        });
        // 初始化时触发滚动事件，确保状态正确
        window.dispatchEvent(new Event('scroll'));
    };
</script>
{/block}