关于轮播图兼容的问题

标签：money   point   over   position   ash   ide   resize   splay   sts   

首先swiper3 作为移动端，用来做轮播图的插件最合适不过了。但是swiper3 作为移动端的首选，它是不支持ie8的。这个时候我们需要使用一些兼容的东西。swiper2是能够兼容ie8的。但是分页器。不能很好的兼容。

2.我们可以使用原生的方式来做一些兼容。下面是我使用的一些方法。进攻参考。

 <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,table,tbody,p,th,td,em{-webkit-text-size-adjust:none;margin:0;padding:0;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:12px;font-family:"Microsoft Yahei","微锟斤拷锟脚猴拷",Tahoma,Arial,Helvetica,STHeiti;}
        html,body{height:100%;}
        img,input,button,a,select,textarea{margin:0;padding:0;resize:none;border:none;outline:none;}
        ol,ul{list-style:none;}
        h1,h2,h3,h4,h5,h6,p,em,i,b,em{font-size:100%;word-wrap:break-word;font-weight:normal;font-style:normal;}
        a:active, a:focus{outline:none;}
        button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
        *html{background-image:url(about:blank);background-attachment:fixed;} /* 锟斤拷锟斤拷IE6锟斤拷bug */

        /* slide */
        .slide-main{height:380px;position:relative;}
        .prev,.next{display:block;width:44px;height:87px;position:absolute;z-index:222;top:146px;overflow:hidden;cursor:pointer;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);_border:1px solid none;}
        .prev{left:70px;}
        .next{right:70px;}
        .prev:hover,.next:hover,.nav-main a:hover,.nav-main a.cur{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
        .item{display:block;width:100%;height:5px;position:absolute;z-index:124;top:348px;left:0;text-align:center;}
        .item a{display:inline-block;width:11px;height:11px;margin-right:11px;background:url(http://image.kuaikuaidai.com/static/images/index/go.png) no-repeat scroll;overflow:hidden;}
        .item a.cur{background:url(http://image.kuaikuaidai.com/static/images/index/on.png) no-repeat scroll;}
        .slide-box,.slide{display:block;width:100%;height:380px;overflow:hidden;}
        .slide-box{position:relative;}
        .slide{display:none;height:380px;padding-top:0px;background:#ff6900;position:relative;position:absolute;z-index:8;}
        #bgstylea{background:#ff6900;}
        #bgstyleb{background:#193d85;}
        #bgstylec{background:#000;}
        .slide a{display:block;width:100%;height:380px;cursor:pointer;}
        .obj-a,.obj-b,.obj-c,.obj-d,.obj-e,.obj-f{position:absolute;z-index:9;left:50%;}
        .obj-a,.obj-b{width:952px;margin-left:-476px;text-align:center;}
        .obj-a{display:block;height:352px;top:100px;}
        .obj-b{top:406px;height:100px;}
        .obj-c{display:block;height:582px;top:0;margin-left:-540px;}
        .obj-d{top:228px;height:164px;}
        .obj-d p{display:block;padding-top:20px;font-size:16px;color:#fff;clear:both;}
        .obj-e{width:366px;height:170px;margin-left:-460px;top:223px;z-index:12;}
        .obj-f{width:692px;height:394px;top:158px;margin-left:-180px;}
        .banAnimate .obj-a{display:block;animation-name:baoAni;-webkit-animation:baoAni 0.4s linear 0s normal none;-moz-animation:baoAni 0.4s linear 0s normal none;animation:baoAni 0.4s linear 0s normal none;}
        @-webkit-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
        @-moz-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
        @keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
        .banAnimate .obj-b{display:block;animation-name:saAni;-webkit-animation:saAni 0.4s linear 0s normal none;-moz-animation:saAni 0.4s linear 0s normal none;animation:saAni 0.4s linear 0s normal none;}
        @-webkit-keyframes saAni{from{opacity:0;-webkit-transform:scale(0,0);} to{opacity:1;-webkit-transform:scale(1,1);} }
        @-moz-keyframes saAni{from{opacity:0;-moz-transform:scale(0,0);} to{opacity:1;-moz-transform:scale(1,1);} }
        @keyframes saAni{from{opacity:0;transform:scale(0,0);} to{opacity:1;transform:scale(1,1);} }
        .watch-code.code-show{display:block;animation-name:scode;-webkit-animation:scode 0.3s linear 0s normal none;-moz-animation:scode 0.3s linear 0s normal none;animation:scode 0.3s linear 0s normal none;}
        @-webkit-keyframes scode{from{opacity:0;-webkit-transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;-webkit-transform:scale(1,1); transform-origin: left bottom;} }
        @-moz-keyframes scode{from{opacity:0;-moz-transform:scale(1,0); transform-origin:left bottom;} to{opacity:1;-moz-transform:scale(1,1);transform-origin:bottom bottom;} }
        @keyframes scode{from{opacity:0;transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;transform:scale(1,1);transform-origin: left bottom;} }
        .banAnimate .obj-c,.banAnimate .obj-e{display:block;animation-name:saAnic;-webkit-animation:saAnic 0.3s linear 0s normal none;-moz-animation:saAnic 0.3s linear 0s normal none;animation:saAnic 0.3s linear 0s normal none;}
        @-webkit-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
        @-moz-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
        @keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
        .banAnimate .obj-d,.banAnimate .obj-f{display:block;animation-name:saAnid;-webkit-animation:saAnid 0.3s linear 0s normal none;-moz-animation:saAnid 0.3s linear 0s normal none;animation:saAnid 0.3s linear 0s normal none;}
        @-webkit-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }
        @-moz-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }
        @keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }


        .slide a {
            background: url(http://image.kuaikuaidai.com/static/images/index/xindexbanner.png) no-repeat center center;
            width: 100%;
            height: 380px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="xindexbanner bannerbox">
    <!--<div class="banner_left">
        <div class="banner_box">
            &lt;!&ndash;begin:登录前的状态&ndash;&gt;
            <div class="banner_box2">
                <div class="xindexlogin textcenter">新浪支付资金托管，理财更安心</div>
                <div class="xindexloginfont">注册快快贷，红包送不停</div>
                &lt;!&ndash; <div class="xindexlogin textcenter">年化收益最高可达<span class="t_font_face">15%</span></div> &ndash;&gt;

                &lt;!&ndash; <div class="xindexloginfont">注册快快贷,就送<span><b class="t_font_face">188</b>元优惠券</span>
                </div> &ndash;&gt;
                <div class="banner_btn"><a href="/register.html">马上领取</a></div>
                <p class="gomylink">已有账号，<a href="/login.html">登录</a></p>
            </div>
            &lt;!&ndash;end:登录前的状态&ndash;&gt;
        </div>
    </div>-->
    <div class="slide-main" id="touchMain"> <a class="prev" href="javascript:;" stat="prev1001"><img src="http://image.kuaikuaidai.com/static/images/index/bannerleft.png" /></a>
        <div class="slide-box" id="slideContent">
            <div class="slide"> <a style="width:100%;height:380px;background: url(https://image.kuaikuaidai.com/banner/c956b522-f1ac-4364-9374-00defd73e8d6.png) no-repeat; background-position: 50% 0;" target="_blank" href=""></a> </div>
            <div class="slide"> <a style="width:100%;height:380px;background: url(https://image.kuaikuaidai.com/banner/0381d6cb-e879-4276-a707-04470d24b270.png) no-repeat; background-position: 50% 0;" target="_blank" href="http://act.kuaikuaidai.com/spread/0001/pc518MonthEvent/index.html"></a> </div>
            <div class="slide"> <a style="width:100%;height:380px;background: url(https://image.kuaikuaidai.com/banner/86b54f31-9637-40e4-b306-156c9ba78cee.png) no-repeat; background-position: 50% 0;" target="_blank" href="http://act.kuaikuaidai.com/spread/0/pcYunYing2017one/index.html"></a> </div>
            <div class="slide"> <a style="width:100%;height:380px;background: url(https://image.kuaikuaidai.com/banner/522d766c-c4b5-4c79-a8da-023287e650c9.png) no-repeat; background-position: 50% 0;" target="_blank" href="https://www.kuaikuaidai.com/notices/e57268db947c465482e71cb233fb4699.html"></a> </div>
            <div class="slide"> <a style="width:100%;height:380px;background: url(https://image.kuaikuaidai.com/banner/20160719/058e2f25-05dc-435f-8fee-933eb6127910.png) no-repeat; background-position: 50% 0;" target="_blank" href="http://www.kuaikuaidai.com/managingMoney.html"></a> </div>
            <div class="slide"> <a style="width:100%;height:380px;background: url(https://image.kuaikuaidai.com/banner/20160622/3c805ec3-0ca7-483d-8c25-a38d62e0810c.png) no-repeat; background-position: 50% 0;" target="_blank" href="http://www.kuaikuaidai.com/aboutUsdcs.html"></a> </div>
        </div>
        <a class="next" href="javascript:;" stat="next1002"><img src="http://image.kuaikuaidai.com/static/images/index/bannerright.png" /></a>
        <div class="item">
            <a class="cur" stat="item1001" href="javascript:;"></a>
            <a class="cur" stat="item1001" href="javascript:;"></a>
            <a class="cur" stat="item1001" href="javascript:;"></a>
            <a class="cur" stat="item1001" href="javascript:;"></a>
            <a class="cur" stat="item1001" href="javascript:;"></a>
            <a class="cur" stat="item1001" href="javascript:;"></a>
        </div>
    </div>
</div>
<!-- 代码 结束 -->

<!--end轮播图-->
<script>
    /*
     name : jack lin;
     QQ:346916672;
     */
    var UA = window.navigator.userAgent,IsAndroid = (/Android|HTC/i.test(UA)),IsIPad = !IsAndroid && /iPad/i.test(UA),IsIPhone = !IsAndroid && /iPod|iPhone/i.test(UA),IsIOS = IsIPad || IsIPhone,clearAnimatea = null;
    var testStyle=document.createElement(‘div‘).style,
            camelCase=function(str){
                return str.replace(/^-ms-/, "ms-").replace(/-([a-z]|[0-9])/ig, function(all, letter){
                    return (letter+"").toUpperCase();
                });
            },
            cssVendor=(function(){
                var ts=testStyle,
                        cases=[‘-o-‘,‘-webkit-‘,‘-moz-‘,‘-ms-‘,‘‘],i=0;
                do {
                    if(camelCase(cases[i]+‘transform‘) in ts){
                        return cases[i];
                    }
                } while(++i<cases.length);
                return ‘‘;
            })(),
            transitionend=(function(){
                return ({
                    ‘-o-‘:‘otransitionend‘,
                    ‘-webkit-‘:‘webkitTransitionEnd‘,
                    ‘-moz-‘:‘transitionend‘,
                    ‘-ms-‘:‘MSTransitionEnd transitionend‘,
                    ‘‘:‘transitionend‘
                })[cssVendor];
            })(),
            isCSS = function(property){
                var ts=testStyle,
                        name=camelCase(property),
                        _name=camelCase(cssVendor+property);
                return (name in ts) && name || (_name in ts) && _name || ‘‘;
            };
    var liebaoBrowser = {
        domAnimation: function(ele){
            ele.detBtn.hover(function(){
                $(this).addClass(‘btn-hover‘);
            },function(){
                $(this).removeClass(‘btn-hover‘);
            });
            ele.navhover.hover(function(){
                $(this).find("i").addClass(‘nav-hover‘);
            },function(){
                $(this).find("i").removeClass(‘nav-hover‘);
            });
            ele.downBtn.hover(function(){
                $(this).addClass(‘down-btn‘);
            },function(){
                $(this).removeClass(‘down-btn‘);
            });
            ele.watchLb.hover(function(){
                ele.code.addClass(‘code-show‘).show();
            },function(){
                ele.code.removeClass(‘code-show‘).hide();
            });
            ele.fnLi.hover(function(){
                var radiusEle = $(this).find(‘div‘);
                $(this).addClass(‘span-img‘);
                if(ele.aniMation){
                    radiusEle.addClass(‘zoom‘);
                }else{
                    radiusEle.show();
                }
            },function(){
                var radiusEle = $(this).find(‘div‘);
                $(this).removeClass(‘span-img‘);
                if(ele.aniMation){
                    radiusEle.removeClass(‘zoom‘);
                }else{
                    radiusEle.hide();
                }
            });
        },
        banSlide: function(item,time,ele,speed){
            clearTimeout(clearAnimatea);
            var length = ele.slide.length- 1;
            /*鑷姩鎾斁*/
            function autoPlay() {
                item++;
                if (item == length+1) {
                    item = 0;
                    aniObj(item);
                }else{
                    aniObj(item);
                }
                spanCur(item);
                clearAnimatea = setTimeout(autoPlay, time);
            }
            clearAnimatea = setTimeout(autoPlay, time);
            /*鐐瑰嚮鍒囨崲鍔ㄧ敾*/
            function slidePrev(e){
                e.preventDefault();
                if(!ele.slide.is(‘:animated‘)){
                    if (item == 0) {
                        item = length;
                        aniObj(item);
                    } else {
                        item--;
                        aniObj(item);
                    }
                    spanCur(item);
                }
            };
            function slideNext(e){
                e.preventDefault();
                if(!ele.slide.is(‘:animated‘)){
                    if (item == length) {
                        item = 0;
                        aniObj(item);
                    } else {
                        item++;
                        aniObj(item);
                    }
                    spanCur(item);
                }
            };
            
            ele.slideCur.click(function() {
                clearTimeout(clearAnimatea);
                ele.slideCur.removeClass(‘cur‘);
                $(this).addClass(‘cur‘);
                item = $(this).index();
                if (item <= length) {
                    aniObj(item);
                }
            });
          
            function aniObj(getNum){
                ele.slide.hide().css({ opacity: 0.5,zIndex: 0});
                ele.slide.eq(getNum).show().stop(true,true).animate({opacity:1,zIndex:8},speed);
                if(ele.aniMation){
                    ele.slide.removeClass(‘banAnimate‘);
                    ele.slide.eq(getNum).addClass(‘banAnimate‘);
                }
            }
            
            function spanCur(eqNum) {
                ele.slideCur.removeClass(‘cur‘);
                ele.slideCur.eq(eqNum).addClass(‘cur‘);
            }
           
            ele.prev.click(slidePrev);
            ele.next.click(slideNext);
            
            if(IsIOS || IsAndroid){
                var touchMain = document.getElementById(‘touchMain‘);
                var page = {
                    x:0,
                    y:0
                }
                var touched;
                touchMain.addEventListener(‘touchstart‘,function(e){
                    clearTimeout(clearAnimatea);
                    page.x = e.changedTouches[0].pageX;
                    page.y = e.changedTouches[0].pageY;
                });
                touchMain.addEventListener(‘touchend‘,function(e){
                    var pageX = e.changedTouches[0].pageX-page.x;
                    var pageY = e.changedTouches[0].pageY-page.y;
                    if(Math.abs(pageX)>50){
                        if(pageX>0){
                            slidePrev(e);
                        }else{
                            slideNext(e);
                        }
                    }
                    clearAnimatea = setTimeout(autoPlay, time);
                    touched=null;
                });
            
                touchMain.addEventListener(‘touchmove‘,function(e){
                    if(null==touched){
                        var pageX = e.changedTouches[0].pageX-page.x;
                        var pageY = e.changedTouches[0].pageY-page.y;
                        touched=Math.abs(pageX-page.x)<Math.abs(pageY-page.y);
                    }
                    if(!touched)e.preventDefault();
                });
            }else{
               
                ele.stopAnimte.hover(function() {
                    clearTimeout(clearAnimatea);
                }, function() {
                    clearAnimatea = setTimeout(autoPlay, time);
                });
            }
           
            ele.slide.eq(0).show().addClass(‘banAnimate‘);
        },
        maxImgInit: function(ele){
            if(ele.windowMain.width()>760){
                ele.maxImg.hover(function(){
                    if(ele.aniMation){
                        $(this).addClass(‘aniimgstyle‘);
                    }else{
                        $(this).addClass(‘imgstyle‘);
                    }
                },function(){
                    if(ele.aniMation){
                        $(this).removeClass(‘aniimgstyle‘);
                    }else{
                        $(this).removeClass(‘imgstyle‘);
                    }
                });
            }else{
                return false;
            }
        },
        windowEvent: function(ele){
            if(!IsIOS && !IsAndroid){
                if(ele.windowMain.height() < 640){
                    ele.downlaodMain.removeClass(‘position‘);
                    ele.downlaodMain.addClass(‘padding‘);
                }else{
                    ele.downlaodMain.removeClass(‘padding‘);
                    ele.downlaodMain.addClass(‘position‘);
                }
            }
        },
        flipObj: function(ele,time){
            if(!IsIOS && !IsAndroid){
                setTimeout(function(){
                    if(ele.aniMation){
                        ele.codeImg.show().addClass(‘flip‘);
                        ele.phoneImg.hide();
                    }else{
                        ele.codeImg.show();
                        ele.phoneImg.hide();
                    }
                },time);
                ele.phoneImg.click(function(){
                    ele.phoneImg.hide().removeClass(‘flip‘);
                    ele.codeImg.show().addClass(‘flip‘);
                });
                ele.codeImg.click(function(){
                    ele.codeImg.hide().removeClass(‘flip‘);
                    ele.phoneImg.show().addClass(‘flip‘);
                });
            }else{
                $(‘.pc-download‘).css({position:‘absolute‘,left:‘0‘,zIndex:‘11‘,top:‘156px;‘});
                $(‘.phone-download‘).css({position:‘absolute‘,left:‘0‘,zIndex:‘12‘,top:‘-156px‘});
            }
        },
        staJS: function(){
            $(document).on(‘click‘,‘a‘,function(e){
                var statData = $(this).attr(‘stat‘);
                try {
                    _hmt.push([‘_trackEvent‘,statData, ‘webLB‘, ‘click‘, ‘download‘,statData]);
                } catch (e) {}
            });
        },
        init: function(ele){
            liebaoBrowser.banSlide(0,5000,ele,500);
            liebaoBrowser.domAnimation(ele);
            liebaoBrowser.windowEvent(ele);
            liebaoBrowser.maxImgInit(ele);
            ele.windowMain.on(‘resize‘,function(){
                liebaoBrowser.windowEvent(ele);
                liebaoBrowser.maxImgInit(ele);
            });
            liebaoBrowser.flipObj(ele,2000);
            liebaoBrowser.staJS();
        }
    };
    $(function(){
        var domEle = {
            navhover: $(‘.nav-main a‘), detBtn: $(‘.details‘),
            maxImg: $(‘.news-img‘), fnLi: $(‘.ft-list li‘),
            aniMation: isCSS(‘animation‘), watchLb: $(‘#watch-lb‘),
            code: $(‘.watch-code‘),
            downBtn: $(‘.beta-info a‘),
            downlaodMain: $(‘.downlaod-main‘),
            windowMain: $(window),
            bodyEle: $(‘body‘),
            stopAnimte: $(‘.slide,.prev,.next,.item‘),
            prev: $(‘.prev‘),
            next: $(‘.next‘),
            slide: $(‘.slide‘),
            slideCur: $(‘.item a‘),
            phoneImg: $(‘.phone-img‘),
            codeImg: $(‘.code-img‘)
        };
        domEle.downlaodMain.show();
        liebaoBrowser.init(domEle);
    });
</script>

关于轮播图兼容的问题

标签：money   point   over   position   ash   ide   resize   splay   sts   

原文地址：http://www.cnblogs.com/jack-lin/p/6937082.html