解決swiper在ie9以下不兼容問題

之前用了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以下並且在高版本瀏覽器上效果還不錯的框架歡迎分享