本文演示了bpHS.js+bootstrap +touchSwipe触屏滑动的幻灯片,而且支持键盘上一页、下一页效果。只有在arrowKeys在37或39的时候触发,即键盘左右箭头,当然你也可以设定上下箭头翻阅,修改在bpHS.js75行。
幻灯片html
<div class="bp-hs" id="demo-default">
<div class="bp-hs_inner">
<div class="bp-hs_inner__item" data-transform="scale">
<a href='http://www.sucaihuo.com/js/130.html' target='_blank'> <img src='img/01.jpg' alt='jQuery侧面浮动对联广告' /> </a>
</div>
<div class="bp-hs_inner__item" data-transform="scale">
<a href='http://www.sucaihuo.com/js/131.html' target='_blank'> <img src='img/02.jpg' alt='jQuery分步式动画进度条' /> </a>
</div>
<div class="bp-hs_inner__item" data-transform="scale">
<a href='http://www.sucaihuo.com/js/132.html' target='_blank'> <img src='img/03.jpg' alt='jQueryQQ商城焦点图自动切换' /> </a>
</div>
<div class="bp-hs_inner__item" data-transform="scale">
<a href='http://www.sucaihuo.com/js/133.html' target='_blank'> <img src='img/02.jpg' alt='jQuery选项卡搜索框切换' /> </a>
</div>
</div>
</div>
引入触屏插件touchSwipe和bpHS.js
<script src="js/vendors/jquery.touchSwipe.min.js"></script>
<script src="js/bpHS.js" type="text/javascript"></script>
$('#demo-default').bpHS({
nextText: '<i class="fa fa-angle-right"></i>',
prevText: '<i class="fa fa-angle-left"></i>',
autoPlay: false
});
bpHS.jsAPI参数
参数 | 描述 | 默认值 |
activate | 初始化索引 | 0 |
touchSwipe | 是否触屏滑动 | true |
nextText | 下一页文字 | - |
prevText | 上一页文字 | - |
showControls | 是否显示控制按钮 | true |
showButtons | 是否显示分页按钮 | true |
autoPlay | 是否自动播放 | false |
arrowKeys | 是否支持键盘左右翻阅上一页、下一页 | false |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791