banner轮播图在IE8下的样式

Posted 2021-05-18 猫与梧桐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了banner轮播图在IE8下的样式相关的知识，希望对你有一定的参考价值。

bannerList轮播图

在页面添加banner轮播图，默认样式如下

使用方法

1.引入js包、样式文件

<link rel="stylesheet" href="bannerList.css">
<!-- 引入jq --> 
<script src="bannerList.js"></script>

组件有4部分组成，分别为主体、底部图片选中栏、左右按钮

2.定义html标签加载

自定义div作为轮播图框架：

 1 <html>
 2  <head></head>
 3  <body>
 4   <div class="banner"> 
 5    <ul class=""> 
 6     <li><a href=""><img src="bg.png" /></a> </li> 
 7    </ul> 
 8    <div class="left-btn"></div> 
 9    <div class="right-btn"></div> 
10    <div class="img-btn-list"></div> 
11   </div>
12  </body>
13 </html>

3.在init时加载组件

默认写一个加载完成事件，加载组件

 1 $(function() {
 2         bannerListFn(
 3             $(".banner"),
 4             $(".img-btn-list"),
 5             $(".left-btn"),
 6             $(".right-btn"),
 7             2000,
 8             true
 9         );
10     });

设置参数：前四个分别为绑定的标签，轮播事件和是否轮播

这里一个简单的轮播图就完成了某种原因需要适配IE8时，会出现底部图片栏按钮不显示的问题

（在IE8以上可正常使用 IE8时，图片正常轮播并左右按钮正常）

可以针对ie8重新自定义方法：

1 function isIE8() {
2         if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
3             // alert("小于 IE9");
4             return true;
5         } else {
6             // alert("大于或等于 IE9");
7             return false;
8         }
9     }

init获取到当前IE版本为IE8时：重写下面方法定义创建图片菜单栏的按钮即可

for (var i=0; i < liLength-1; i++ ){
            $imgBtnList.append("<span></span>");
        }

        $imgBtnList.children().eq(0).addClass("current");

        $imgBtnList.children().click(function(){
            var index=$(this).index();
            array=index;
            bannerImgList(index);
            $imgBtnList.children().eq(array).addClass("current").siblings().removeClass("current");

        });

以上是关于banner轮播图在IE8下的样式的主要内容，如果未能解决你的问题，请参考以下文章

怎么样才能让div里的内容轮播就想普通的banner图那样由左右箭头切换啊

图片轮播图插件

轮播图的实现

静态英雄联盟轮播图布局

Android三方框架banner实现轮播图

小程序swiper轮播图不显示