关于轮播图兼容的问题

首先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>