关于轮播图兼容的问题
Posted 文王之殇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于轮播图兼容的问题相关的知识，希望对你有一定的参考价值。
首先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">
<!–begin:登录前的状态–>
<div class="banner_box2">
<div class="xindexlogin textcenter">新浪支付资金托管，理财更安心</div>
<div class="xindexloginfont">注册快快贷，红包送不停</div>
<!– <div class="xindexlogin textcenter">年化收益最高可达<span class="t_font_face">15%</span></div> –>
<!– <div class="xindexloginfont">注册快快贷,就送<span><b class="t_font_face">188</b>元优惠券</span>
</div> –>
<div class="banner_btn"><a href="/register.html">马上领取</a></div>
<p class="gomylink">已有账号，<a href="/login.html">登录</a></p>
</div>
<!–end:登录前的状态–>
</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>
以上是关于关于轮播图兼容的问题的主要内容，如果未能解决你的问题，请参考以下文章