兼容ie8的轮播插件

[xieshanshan]

记一次兼容ie8的轮播插件 bxslider

github的地址：https://github.com/stevenwanderski/bxslider-4 用法

<script src="path/jquery.js"></script>
<script src="path/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="path/jquery.bxslider.css"/>

html页面

 <ul class="bxslider">
   <li><img src="/images/banner1.jpg"/></li>
   <li><img src="/images/banner2.jpg" /></li>
   <li><img src="/images/banner3.jpg" /></li>
</ul>

js文件

$('.bxslider').bxSlider();

现在运行页面 可能报 controls.png 404 因为插件会生成prev next 这两个展示是通过jquery.bxslider.css中的background去定位到轮播的左右的 所以在项目中还需要引入一下controls.png

bxslider 提供了很多可配置项

mode ： 'horizontal'(默认), 'vertical', 'fade' －－－－动画的滑动方式 speed : －－－动画的切换速度 startSlide ： －－－－从第几个图片开始轮播 默认是0 infiniteLoop：－－轮播到最后一张图片时是否将过渡到第一张图片 默认 true (过渡) tiker :－－自动滑动滑块 tikerHover:－－在tiker自动滑动下 tikerHover为true 自动滑动将停止 touchEnabled： －－－if为true 轮播将允许触摸滑动滑块

pager :－－－自动生成下面分页的小圆圈 if 为false 分页将不显示 pagerType: －－full 下方的分页以⭕️的形式显示 short 以数字的形式显示 1/3 2/3 3/3 pagerShortSeparator : if （pageType 为 short ）默认分割符为 / 可以设置分隔符

controls : －－ 控制prev next 是否显示 nextText : －－用于下一张 的控制 prevText : －－用于上一张的控制

autoControls ： if true 则出现开始 停止的控制按钮 auto : 图片自动轮播

minSlides : 最小的轮播个数 maxSlides ; 最多显示的图片个数 moveSlides : 一次移动图片的个数 必须minSlides<=moveSlides < maxSlides slideWidth: 每张幻灯片的宽度

还提供了函数 onSlideBefore ...

[xieshanshan]

坑

问题： 左右轮播时时两边有个前进按钮，后退按钮，点击一次前进或后退按钮后，它就不自动轮播了？？？

解决方法： 修改源码 在jquery.bxslider.js里面全局搜索clickNextBind 会查找到一个函数 主要作用点击next按钮

var clickNextBind = function(e){
// if auto show is running, stop it
if (slider.settings.auto) el.stopAuto();
el.goToNextSlide();
el.startAuto();          ***** 自动添加一行代码
e.preventDefault();

同理 ： 全局查找clickPrevBind

var clickPrevBind = function(e){
// if auto show is running, stop it
if (slider.settings.auto) el.stopAuto();
el.goToPrevSlide();
el.startAuto();        *****自动添加的一行
e.preventDefault();
}

加上上面的两行代码这个问题就解决啦

[xieshanshan]

坑之旅2

同next 和 prev按钮一样 点击完之后就不在轮播 同样加一行代码 clickPagerBind

var clickPagerBind = function(e){
      // if auto show is running, stop it
      if (slider.settings.auto) el.stopAuto();
      var pagerLink = $(e.currentTarget);
      if(pagerLink.attr('data-slide-index') !== undefined){
        var pagerIndex = parseInt(pagerLink.attr('data-slide-index'));
        // if clicked pager link is not active, continue with the goToSlide call
        if(pagerIndex != slider.active.index) el.goToSlide(pagerIndex);
        el.startAuto();  //后来添加的代码
        e.preventDefault();
      }
    }