发现并没有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
});
但是发现另一个奇葩的问题,当右手按住滑动,左手同时点击图片的时候,会出现一种静止状态。如图:
于是又回到官网找option,发现有个属性:
$('.bxslider').bxSlider({
auto: true,
controls: false,
pagerType: 'short',
infiniteLoop: false,
oneToOneTouch: false
});
随着手指滑动图片并不会随之滚动,而是放开手指后才滑动,就不会出现上面的BUG了。
不过还有个待解决的问题:用手指滑动后,图片不会再自动轮播。暂时未找到解决办法。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。