swiper2.js实现纵向轮播兼容IE

自己做了一个纵向轮播图,实现了滑动,点击按钮滚动,和自动滚动,其中遇到了几个坑,和大家分享一下

1.只有swiper2.js和之前的版本才可以兼容IE浏览器

2.动态从后端获取数据后轮播图没有反应,和swiper初始化的时间有关

 

css代码。记得引入    idangerous.swiper.css


    <style>

        .iframe_container{
            width: 87%;
            height: 100%;
            float: left;
            box-sizing: border-box;
        }
        .swiper-box{
            width: 12%;
            height: 100%;
            float: right;
            position: relative;
            margin: 0 auto;
            /*min-height: 1000px;*/
        }
        .swiper-container {
            height: 91%;
            width: 95%;
            margin-top: 21%;
            overflow: hidden;
            padding: 0 0.5%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            width: 94%;
            height: 90px;
            border-radius: 5px;
            user-select:none;
            margin-bottom: 20px;
            margin-left: 3px;
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            user-select: none;
        }
        .swiper-slide img{
            width: 100%;
            height: 100%;
        }

        .swiper-slide-actived{
            border: 3px solid #108cff;
        }
        .swiper-slide img:hover{
            box-shadow: 0 0px 8px rgba(0, 0, 0, .4);
        }

        .swiper-button-common{
            position: absolute;
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 50%;
            color: #ccc;
            left: 50%;
            margin-left: -15px;
            text-align: center;
            line-height: 30px;
            box-shadow: 0 0px 4px rgba(0, 0, 0, .3);
            outline:none;
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            user-select: none;
            z-index: 999;
            cursor: pointer;
        }

        .swiper-button-prev{
            top: 5px;
        }

        .swiper-button-common:hover{
            color: #108cff;
            box-shadow: 0 0 3px rgba(0, 0, 0, .6);
            border: 1px solid #108cff;
        }

        .swiper-button-prev:after{
            font-size: 20px;
        }
        .swiper-button-next:after{
            font-size: 20px;
        }

    </style>

js代码。记得引入  idangerous.swiper.min.js  和  jquery

window.onload = function () {
        // iframe自适应宽高
        var height = (document.documentElement.clientHeight || document.body.clientHeight) - 30;
        $('.container').height(height);
        $('.swiper-button-next').css('top',height -25);
        // 请求后台接口获取URL
        $.ajax({
            url: '/pm/panoedit/indexList',、//数据获取接口
            type: 'POST',
            dataType: 'json',
            success: function (res) {
                    var str = '';
                    for (let i = 0; i < res.data.length; i++){
                        str += '<div class="swiper-slide" data-index="'+ i +'"><img src="'+res.data[i].panoThumbnailUrl+'" alt=""></div>';
                        //默认显示索引为0的iframe
                        var iframe = '<iframe id="iframe" width="100%" height="100%" src="'+res.data[0].panoUrl+'" frameborder="0">';
                    }
                    $('.swiper-wrapper').html(str);
                    $('.iframe_container').html(iframe);

                    //当数据加载完成初始化swiper 解决不能滑动问题
                    let swiper = new Swiper('.swiper-container', {
                        mode: 'vertical',//纵向轮播
                        slidesPerView: 8,
                        cssWidthAndHeight:true,//自己设置slide的宽高
                        // spaceBetween: 15,
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                    });
                    $('.swiper-button-next').on('click', function(e){
                        e.preventDefault();
                        swiper.swipePrev();
                    })
                    $('.swiper-button-prev').on('click', function(e){
                        e.preventDefault();
                        swiper.swipeNext();
                    });
                    //点击每一项切换iframe的URL
                    $('.swiper-slide').click(function () {
                        //当前样式
                        $(this).siblings('.swiper-slide').removeClass('swiper-slide-actived');
                        $(this).addClass('swiper-slide-actived');
                        //根据data-index来切换iframe的URL
                        var index = $(this).attr('data-index');
                        var iframe = '<iframe id="iframe" width="100%" height="100%" src="'+res.data[index].panoUrl+'" frameborder="0">';
                        $('.iframe_container').html(iframe);
                    });
            }
        })
    };

由于公司性质,效果图就不上传了,嘿嘿。祝大家代码全是bug

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

李三岁zt

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值