发现并没有bxslider这个标签,是不是很少人用这个图片轮播插件?上个链接:bxslider

这个jquery图片轮播插件个人一直沿用至今,不仅支持PC端对移动端也不错。用起来也方便:

.html

<ul class="bxslider">
      <li><img src="./resource/images/time0.jpg" /></li>
      <li><img src="./resource/images/time1.jpg" /></li>
      <li><img src="./resource/images/time2.jpg" /></li>
      <li><img src="./resource/images/time3.jpg" /></li>
      <li><img src="./resource/images/time4.jpg" /></li>
</ul>

.jquery

$('.bxslider').bxSlider({
      auto: true,
      controls:false,
      pagerType:'short',
      infiniteLoop:true
});

本地没问题,但是由于图片是ajax加载的,滑动到最后一张图会出现空白,无法跳回第一张图片,那还不如不要无限循环播放。于是禁止无限循环:

$('.bxslider').bxSlider({
      auto: true,
      controls:false,
      pagerType:'short',
      infiniteLoop:false
});

但是发现另一个奇葩的问题,当右手按住滑动,左手同时点击图片的时候,会出现一种静止状态。如图:
静止状态BUG

于是又回到官网找option,发现有个属性:
bxslider属性

$('.bxslider').bxSlider({
    auto: true,
    controls: false,
    pagerType: 'short',
    infiniteLoop: false,
    oneToOneTouch: false
});

随着手指滑动图片并不会随之滚动,而是放开手指后才滑动,就不会出现上面的BUG了。

不过还有个待解决的问题:用手指滑动后,图片不会再自动轮播。暂时未找到解决办法。


Shyla
1.5k 声望148 粉丝

FE programmer


引用和评论

0 条评论