码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-03-02 17:14:48      阅读:6767      评论:0      收藏:0      [点我收藏+]

标签:url   size   dede   slide   sof   center   control   str   disable   

之前用了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以下不兼容问题

标签:url   size   dede   slide   sof   center   control   str   disable   

原文地址:http://www.cnblogs.com/holdonBestrong/p/6491040.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!