V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
skyloongltl
V2EX  ›  前端开发

swiper 图片使用 jquery 的 slideToggle 收起后定时滑动失效

  •  
  •   skyloongltl · 2019-09-26 15:29:18 +08:00 · 2401 次点击
    这是一个创建于 1891 天前的主题,其中的信息可能已经有所发展或是发生改变。

    使用了 swiper 的定时滑动后,再用 jquery 的 slideToggle 函数将图片收起,收起的时间超过三秒这样。在展开,图片的自动滑动就会失效,这是为什么呢?要怎么解决呢?

    <body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/adv0001.jpg" /></div>
                <div class="swiper-slide"><img src="./images/adv0002.jpg"></div>
                <div class="swiper-slide"><img src="./images/adv0003.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <button id="btn">展开</button>
        <script>
            var mySwiper = new Swiper('.swiper-container', {
                loop: true, // 循环模式选项
                // 自动播放时间
    
                autoplay: {
                    delay: 3680,
                    disableOnInteraction: false
                },
                observer: true,
                observeParents: true,
                // 播放的速度
    
                speed: 1000,
    
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                }
            });
            $('#btn').click(function () {
                $('.swiper-container').slideToggle();
            });
        </script>
    </body>
    
    
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2165 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:45 · PVG 08:45 · LAX 16:45 · JFK 19:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.