网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
响应迅速移的动端jQuery轮播图插件,用户可以全屏模式查看所有分组的图像。
[桌面]:导航箭头。
[桌面和移动]:单击放大。
[移动]:可在导航之间滑动图像。
[移动]:图像缩放。
1. 在页面中加载jQuery库和mtfpicviewer插件文件。
<link rel="stylesheet" href="/path/to/jquery.mtfpicviewer.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.mtfpicviewer.js"></script>
2. 创建轮播图html代码。
<div class="example">
<div>
<img src="1.jpg" alt="Image 1">
<img src="2.jpg" alt="Image 2">
<img src="3.jpg" alt="Image 3">
</div>
</div>
3. 初始化轮播图插件。
$('.example').mtfpicviewer({
selector: 'img',
attrSelector: 'src',
parentSelector: 'div'
});
4. 将自定义CSS类附加到图像查看器。
$('.example').mtfpicviewer({
selector: 'img',
attrSelector: 'src',
parentSelector: 'div',
className: 'pic-viewer'
});
5. 回调方法。
$('.example').mtfpicviewer({
onChange: function(curIndex, preIndex) {
// do something
},
onOpen: function(curIndex) {
// do something
},
onClose: function(curIndex) {
// do something
}
});
转载请注明来源:响应式移动端jQuery轮播图插件(mtfPicViewer)
本文永久链接地址:https://www.moyouyouw.cn/code/920.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论