Swiper4写的页面左右切换展示(类似于微场景)效果,在苹果手机中点击切换,白屏,而且不跳转下一页

要做大佬的小白
  • 390

如题,用Swiper4结合swiper.animate实现的页面场景展示网页,在pc,安卓手机都正常,在ios手机中,点击左右切换按钮的时候,先是页面空白,重新加载,然后没有跳转到下一页,请问大佬们是什么情况?

html:

                    <div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/taobsh.jpg" class="p5_bg" />
                        <img src="images/tao_02.png" class="p33_tao" />
                        <img src="images/tao_02.png" class="p33_tao1" />
                        <img src="images/taoshu_01.png" class="p33_taoshu" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/bg_tabo.jpg" class="p5_bg" />
                        <img src="images/ttao.png" class="p34_hua" />
                        <img src="images/ttao.png" class="p34_hua1" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/p35_bg.jpg" class="p5_bg" />
                        <img src="images/ps_02.png" class="tresa" />
                        <img src="images/p35_tree_01.png" class="p35_hua" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/p36_bg.jpg" class="p5_bg" />
                        <img src="images/left_fod_02.png" class="left_fot" />
                        <img src="images/right_fod_03.png" class="right_fot ani" swiper-animate-effect="qians" swiper-animate-duration="3s" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/ddgh.jpg" class="p5_bg" />
                        <img src="images/ppfots_03.png" class="pp_fot" />
                        <img src="images/ppfots_07.png" class="pp_fots" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/p38_Bg.jpg" class="p5_bg" />
                        <img src="images/chuangl_02.png" class="cls" />
                        <img src="images/p38_user_02.png" class="clse" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/p39_fots.jpg" class="p5_bg" />
                        <img src="images/p39_fot_03.png" class="p39_gs" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/p40_bgs.jpg" class="p5_bg" />
                        <img src="images/p40_Fot_03.png" class="p40_gs" />
                    </div>
                </div>
                <img src="images/nextious.png" class="next " />
                <img src="images/previous.png" class="prev " />
                <img src="images/mp3.png" class="play" />

js功能部分:

<script>
            var num = 0;
            var num1 = 0;
            var times1 = setInterval(function() {
                if(num1 == 100) {
                    clearInterval(times1)
                    swiper.slideNext();
                    var times = setInterval(function() {
                        if(num <= 4) {
                            num++;
                        } else {
                            console.log(1)
                            $('.next').fadeIn()
                            $('.prev').fadeIn()
                            swiper.slideNext();
                            clearInterval(times)
                        }
                    }, 1000)
                } else {
                    num1++;
                    $('.dus div span').css('width', num1 + '%')
                    $('.du .dus p').html(num1 + '%')
                }
            }, 20)
            //这里出现了问题
            $('.next').click(function() {
                swiper.slideNext();
            })
             //这里出现了问题
            $('.prev').click(function() {
                swiper.slidePrev();
            })
            var swiper = new Swiper('.swiper-container', {
                pagination: {
                    el: '.swiper-pagination',
                },
                on: {
                    init: function() {
                        swiperAnimateCache(this); //隐藏动画元素 
                        this.emit('slideChangeTransitionEnd'); //在初始化时触发一次slideChangeTransitionEnd事件
                    },
                    slideChangeTransitionEnd: function() {
                        swiperAnimate(this); //每个slide切换结束时运行当前slide动画
                        this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展示一次
                    }
                },
    
                //            effect: 'fade',
                //            speed: 2000,
            });
    
            var audio = document.getElementById('audio');
            document.addEventListener("WeixinJSBridgeReady", function() {
                document.getElementById('audio').play();
            }, false);
            $('.play').click(function() {
                if(audio.paused) {
                    audio.play();
                } else {
                    audio.pause();
                }
            })
            audio.play();
        </script>
回复
阅读 1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏