标签: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以下并且在高版本浏览器上效果还不错的框架欢迎分享
标签:url size dede slide sof center control str disable
原文地址:http://www.cnblogs.com/holdonBestrong/p/6491040.html