前言：

　　　　最近项目有一个需求，想要下图效果，鼠标指向头像图片，图片会放大同时上面的轮播会跟着切换；

　　　　鼠标移开头像图片，图片变回原来的大小

　　　　注：下图是我根据上面需求已经实现的效果，所以截图方便说明

　　　　

　　

　　思考：

　　　　然后我就想偷懒，直接去网上搜一个这样的效果，但搜了很久也没搜到，并且也不知道这个效果叫什么名字

　　　　后来仔细想想，这跟轮播不是很相似吗？只是把切换的小圆点和左右箭头换成了图片而已

　　　　以前偶然看到过某网站有类似的效果，我想应该也是用轮播改的，然后就想到结合用swiper轮播插件来实现这个效果

　　　　注：如果是在PC端上使用，并且要兼容i8及以上，要使用swiper2.0，swiper3.0开始就不支持PC端了

　　　　之前写过一篇博客简单介绍了各版本间的区别：https://www.cnblogs.com/tu-0718/p/9880272.html    

　　　　

　　

　　问题：

　　　　在其它主流浏览器上都没有问题，但是在ie上，轮播图片和用来触发轮播切换的头像图片都无法显示，如下图

　　　　

　　　　

　　　　另我费解的是，我以为ie8才有这个问题，结果ie11也是这样。于是做了以下尝试

　　　　 ①：检查图片路径是否正确

　　　  ②：检查引用的css，js路径是否正确

　　　  ③：检查代码是否有编写错误，比如单词拼写错误

　　　  ④：把CDN引用换成本地css，和js（我之前引用的是CDN，担心是不是ie不支持CDN）

　　　  ⑤：把引入的 jquery和swiper js文件换成低版本的

　　　  ⑥：把swiper 2.0官网的示例代码下载下来进行对比

　　　  ⑦：检查IE浏览器是否是最新版本，有无更新

　　　 

　　　 本以为通过上面的方式能够找到解决方法，然而全部宣告失败（当时我的内心是崩溃的，一万头羊驼狂奔而过）

　　

　　解决：

　　　　最后，实在想不出到底是什么原因所致，正在抓狂的我，突然有一个念头一闪而过，

　　　　会不会是我这个电脑本身的ie浏览器有问题，后来我回家用自己的台式电脑试了一下，

　　　　没有任何问题，i8都能够正常显示，这下问题迎刃而解（我的天，不带这么坑的啊）

　　　　注：公司的电脑是win10，家里的电脑是win8，我觉得跟系统应该没什么关系

　　　　下面附上我的demo，为了方便大家测试，引入的文件都是CDN，只需要把图片和图片路径换一下就行了（业界良心啊23333）

　　　　

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>Demo</title>
  7.         <link rel="stylesheet" href="https://cdn.staticfile.org/Swiper/2.7.6/idangerous.swiper.min.css" />
  8.         <style>
  9.  
  10.             body {
  11.                 margin: 0;
  12.                 font-family: Arial, Helvetica, sans-serif;
  13.                 font-size: 13px;
  14.                 line-height: 1.5;
  15.             }
  16.  
  17.             .device {
  18.                 position: relative;
  19.                 width: 640px;
  20.                 height: 300px;
  21.                 padding: 30px 80px;
  22.                 border-radius: 20px;
  23.                 background: #111;
  24.                 border: 3px solid white;
  25.                 margin: 5px auto;
  26.                 box-shadow: 0px 0px 5px #000;
  27.             }
  28.  
  29.             .device .arrow-left {
  30.                 background: url(img/arrows.png) no-repeat left top;
  31.                 position: absolute;
  32.                 left: 10px;
  33.                 top: 50%;
  34.                 margin-top: -15px;
  35.                 width: 17px;
  36.                 height: 30px;
  37.             }
  38.  
  39.             .device .arrow-right {
  40.                 background: url(img/arrows.png) no-repeat left bottom;
  41.                 position: absolute;
  42.                 right: 10px;
  43.                 top: 50%;
  44.                 margin-top: -15px;
  45.                 width: 17px;
  46.                 height: 30px;
  47.             }
  48.  
  49.             .swiper-container {
  50.                 height: 300px;
  51.                 width: 640px;
  52.             }
  53.  
  54.             .content-slide {
  55.                 padding: 20px;
  56.                 color: #fff;
  57.             }
  58.  
  59.             .title {
  60.                 font-size: 24px;
  61.                 margin-bottom: 10px;
  62.             }
  63.  
  64.             .pagination {
  65.                 position: absolute;
  66.                 left: 0;
  67.                 text-align: center;
  68.                 bottom: -250px;
  69.                 z-index: 999;
  70.                 width: 100%;
  71.             }
  72.  
  73.             .pagination img {
  74.                 width: 150px;
  75.                 height: 150px;
  76.                 border-radius: 50%;
  77.                 margin: 0 20px;
  78.             }
  79.  
  80.             .pagination-mouseover {
  81.                 -webkit-transform: scale(1.5);
  82.                 -webkit-transition: .5s;
  83.                 -moz-transform: scale(1.5);
  84.                 -moz-transition: .5s;
  85.                 -ms-transform: scale(1.5);
  86.                 -ms-transition: .5s;
  87.                 transform: scale(1.5);
  88.                 transition: .5s;
  89.             }
  90.             .pagination-mouseout {
  91.                 -webkit-transform: scale(1);
  92.                 -webkit-transition: .5s;
  93.                 -moz-transform: scale(1);
  94.                 -moz-transition: .5s;
  95.                 -ms-transform: scale(1);
  96.                 -ms-transition: .5s;
  97.                 transform: scale(1);
  98.                 transition: .5s;
  99.             }
  100.         </style>
  101.     </head>
  102.  
  103.     <body>
  104.         <div class="device">
  105.             <a class="arrow-left" href="#"></a>
  106.             <a class="arrow-right" href="#"></a>
  107.             <div class="swiper-container">
  108.                 <div class="swiper-wrapper">
  109.                     <div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
  110.                     <div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
  111.                     <div class="swiper-slide">
  112.                         <div class="content-slide">
  113.                             <p class="title">Slide with HTML</p>
  114.                             <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
  115.                         </div>
  116.                     </div>
  117.                     <div class="swiper-slide">
  118.                         <div class="content-slide">
  119.                             <p class="title">Slide with CSS</p>
  120.                             <p>You can put any CSS inside of slide with any layout, not only images, even another Swiper!</p>
  121.                         </div>
  122.                     </div>
  123.                 </div>
  124.             </div>
  125.             <div class="pagination">
  126.                 <img src="img/1.png" />
  127.                 <img src="img/2.png" />
  128.                 <img src="img/3.png" />
  129.                 <img src="img/4.png" />
  130.             </div>
  131.         </div>
  132.         <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
  133.         <script src="https://cdn.staticfile.org/Swiper/2.7.6/idangerous.swiper.min.js"></script>
  134.         <script>
  135.             var mySwiper = new Swiper('.swiper-container', {
  136.                 loop: true,  //  开启无缝滚动
  137.                 grabCursor: true,  //  鼠标覆盖Swiper时指针会变成抓手形状
  138.                 paginationClickable: true
  139.             })
  140.  
  141.             //  左右箭头切换
  142.             $('.arrow-left').on('click', function(e) {
  143.                 e.preventDefault();
  144.                 mySwiper.swipeNext();
  145.             })
  146.             $('.arrow-right').on('click', function(e) {
  147.                 e.preventDefault();
  148.                 mySwiper.swipePrev();
  149.             })
  150.  
  151.             //  鼠标移入移出
  152.             $('.pagination img').on('mouseover', function(e) {
  153.                 $('.pagination img').removeClass('pagination-mouseover');
  154.                 $(this).addClass('pagination-mouseover');
  155.                 mySwiper.swipeNext();
  156.                 //$('.pagination img').css({"transform":"scale(1.5)","transition":"1s"});
  157.             })
  158.             $('.pagination img').on('mouseout', function(e) {
  159.                 $('.pagination img').removeClass('pagination-mouseout');
  160.                 $(this).addClass('pagination-mouseout');
  161.                 //$('.pagination img').css({"transform":"scale(1.5)","transition":"1s"});
  162.             })
  163.         </script>
  164.     </body>
  165.  
  166. </html>

　　　　

　　　　

swiper轮播在ie浏览器上遇到的显示问题探索的更多相关文章

  1. Swiper轮播隐藏再显示后不动

    公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...

  2. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  3. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  4. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  5. 视频swiper轮播

    关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...

  6. swiper轮播图（逆向自动切换类似于无限循环）

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  7. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  8. Swiper轮播手动后不动

    最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准: 1.autoplayDisableOnInteraction: ...

  9. 一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题

    Bootstript轮播冲突 解决方法: 使用不同的id <div id="myCarousel1" class="carousel slide"> ...

随机推荐

  1. 面试简单整理之IO

    1.字节流,字符流 整个Java IO体系都是基于字节流(InputStream/OutputStream) 和 字符流(Reader/Writer)作为基类,根据不同的数据载体或功能派生出来的. 2 ...

  2. ci框架nginx访问

    url:http://localhost:20082/index.php/welcome/index 问题:apache环境下可以访问,nginx环境下不可以

  3. 使用JS在页面进行数据处理时显示等待画面

    使用js在页面进行数据处理期间显示等待画面: 在页面选择执行函数进行数据处理期间,显示等待画面. <script> function fun(the,row_id) { //测试函数 // ...

  4. txt 修改

    [61TECH_HEIBAILIUYI]#gaIcldGcyd7ducFc3deaRaOdAd4dPdMdaenc1chaeedeGcfcfeyd1cedhbidIcXcIdBdbdvdfcvbjdr ...

  5. clientdataset新增append新增多条记录的时候报错 key valation

    在前面加上两句 adsDetail.Active := False; adsDetail.CreateDataSet;

  6. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

  7. js html标签select 中option 删除除了第一行外的其他行

    背景:共两个下拉框,第一个下拉框选择完之后,以第一个选定的值为条件返回第二个下拉框中的内容,用js中的createElement()创建,并利用appendChild()来添加进父标签.出现意外:每次 ...

  8. 86、UIWindow简单介绍

    一.介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow ios程序启动完毕后,创建的第一个视图控制器 ,接着创建控制器的view,最后将控制器的view添加到 ...

  9. Java面试题之Redis

    1.redis数据结构有哪些? string,list,hash,set,zset 2.redis为什么是单线程的? redis是基于内存的操作,cpu不是redis的瓶颈,内存大小或网络带宽才是: ...

  10. C语言函数指针与 c#委托和事件对比

    C语言: 函数指针可以节省部分代码量,写类似具有多态的函数,比如要比较最大值,如果不用函数指针就只能写比较某一类型比如int类型的max函数,这个max无法比较string的大小.函数指针的意义就不多 ...