首页 > 代码库 > 解决swiper在ie9以下不兼容问题

解决swiper在ie9以下不兼容问题

2024-09-06 15:49:00   218人阅读

之前用了swiper3做焦点图，结果发现在ie8下不兼容，然后换来了swiper2，发现还是不兼容

swiper2在ie9以下没有transition效果，所以自动降级成了js动画，但是这个swiper2写的有问题，焦点图切换的速度没有用，速度特别快，而且点击一次之后自动轮播也消失了。

于是想起了一个办法，在ie9以上用swiper2，ie9以下用其它焦点图框架，就是判断浏览器，然后调用不同的框架。

样式的话，不同的浏览器在焦点图父元素上加上不同的class名，这样会对应不同的class名来找到需要的不同的样式

<section class="banner" id="banner">
        <div id="lun2" class="swiper-container">
            <div class="swiper-wrapper">
               
                <div class="swiper-slide">
                    <a href="@Url.Action("Index","Car")" target="_blank">
                        <img src="~/Content/webimg/index.jpg" />
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="@Url.Action("Yihui","Topology")" target="_blank">
                        <img src="~/Content/webimg/yihui.jpg" />
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="@Url.Action("Hahale","Topology")" target="_blank">
                        <img src="~/Content/webimg/hahale.jpg" />
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="@Url.Action("Yiwei","Topology")" target="_blank">
                        <img src="~/Content/webimg/wenhua.jpg" />
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="@Url.Action("Meissen","Topology")" target="_blank">
                        <img src="~/Content/webimg/pinzhi.jpg" />
                    </a>
                </div>
            </div>
            <!--分页器-->
            <div class="pagination"></div>
            <!--左右按钮-->
            <div id="prevbtn" class="swiperbtn"><i class="fa fa-angle-left"></i></div>
            <div id="nextbtn" class="swiperbtn"><i class="fa fa-angle-right"></i></div>
        </div>
       <!--ie8-->
        
    </section>

js:

　　　　　　function swipertwo() {
            $("#banner").addClass("fornotie")
            var mySwiper1 = new Swiper(‘.swiper-container‘, {
                autoplay: 5000,//可选选项，自动滑动
                loop: true,//可选选项，开启循环
                speed: 1000,
                autoplayDisableOnInteraction: false,
                keyboardControl: true,//键盘滚动
                calculateHeight: true,//自动高度
                pagination: ‘.pagination‘,
                paginationClickable: true,//点击分页器的指示点时会发生Swiper。
                onInit: function (swiper) {

                }
            })
            document.getElementById("prevbtn").onclick = function () {
                mySwiper1.swipePrev();
            }
            document.getElementById("nextbtn").onclick = function () {
                mySwiper1.swipeNext();
            }

            $(window).resize(function () {
                mySwiper1.reInit();
            });
        }
        $(document).ready(function () {
            var DEFAULT_VERSION = 9;
            var ua = navigator.userAgent.toLowerCase();
            var isIE = ua.indexOf("msie") > -1;
            var safariVersion;
            if (isIE) {
                safariVersion = ua.match(/msie ([\d.]+)/)[1];
                var sa = parseInt(safariVersion);
                if (safariVersion <= DEFAULT_VERSION) {
                    //ie9以下，添加class名调用slide框架
                    $("#banner").addClass("forie")
                    $("#lun2").slide({
                        autoplay: true,
                        autoTime: 5000,
                    });
                } else {
                    //ie9以上，调用swiper2
                    swipertwo()
                }
            } else {
                //非ie
                swipertwo()
            }
        });

slide.js的css:
.forie #lun2{
    position: relative;
}
.forie .swiper-container .swiper-wrapper{width:100%;overflow:hidden;position:relative}
.forie .swiper-container .swiper-slide .banner-img{width:100%;}
.forie .swiper-container .swiper-wrapper .swiper-slide{
    width:100%;
    position:absolute;
}
.forie .swiper-container .console{
    height: 57px;
    display: inline-block;
    width: 35px;
    position: absolute;
    top: 40%;
}
.forie .swiper-container .pagination{
    position: absolute;
    z-index: 20;
    bottom: 10px;
    width: 100%;
    text-align: center;
    margin: 22px 0;
}
.forie .swiper-container .pagination ul li{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    margin: 0 5px;
    border: 1px solid #fff;
    cursor: pointer;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.forie .swiper-container .pagination ul li.active{
     background: #4B9FE9;
     border:none;
     width: 14px;
     height: 14px;
     border-radius: 14px;
}
.forie .swiper-container .swiperbtn{
    position: absolute;
    color: #fff;
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.forie .swiper-container .swiperbtn:hover{
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -o-transform:scale(1.2);
    transform:scale(1.2);
} 
.forie .swiper-container .swiperbtn i{
    font-size: 50px;
}
.forie .swiper-container #prevbtn{
    cursor:pointer;
    left: 75px;
}
.forie .swiper-container #nextbtn{
    cursor:pointer;
    right: 75px;
}
.forie .swiper-container .slidedetail{display:none;}


.forie .imgtoVideo img{width:100%;}
.forie .imgtoVideo>div{padding:1px;position:relative;cursor:pointer;width:49%;    display: inline-block;}
.forie .imgtoVideo>div:hover .imgtoVideoDetail{display:block}
.forie .imgtoVideo .imgtoVideoDetail{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding:1px;
    display:none
}
.forie .imgtoVideo .imgtoVideoDetail >div{
     background: rgba(0, 98, 197,0.8);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#C8142B49,endColorstr=#C8142B49);
     width: 100%;
     height: 100%;
     text-align:center;
}
.forie .imgtoVideo .tovideo .imgtoVideoDetail{
    display:block;
}
.forie .imgtoVideo .tovideo .imgtoVideoDetail >div{
        background: #0C2D47;
    width: 60px;
    height: 60px;
    color: #fff;
    line-height: 60px;
    vertical-align: middle;
    margin: 0 auto;
    margin-top: 17%;
}
.forie .imgtoVideo .imgtoVideoDetail .fa-search{
    color: #fff;
    font-size: 25px;
    margin-top: 21%;
}
.forie .contentIV{
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    display: table;
    background: rgba(20, 43, 73,0.8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#C8142B49,endColorstr=#C8142B49);
    margin:0 auto;
    z-index:-999;
    max-width:1024px;
    display:none;
}

.forie #picturetoVideo .swiper-wrapper .swiper-slide{display:table;height:100%}
.forie #picturetoVideo .swiper-wrapper .swiper-slide>div{display:table-cell;vertical-align: middle;text-align: center;}
.forie #picturetoVideo .swiper-wrapper .swiper-slide .banner-img{max-width:100%;width:auto}
.forie .closeContentIV{
        position: absolute;
    top: 10px;
    right: 10px;
    font-size: 25px;
    color: #fff;
    font-weight: bold;
    cursor:pointer;
    z-index: 999;
}

 

 

这是比较笨的一种方法，如果有兼容ie8以下并且在高版本浏览器上效果还不错的框架欢迎分享

 

解决swiper在ie9以下不兼容问题


联系
我们