一、加载文件
1 <link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.0.47/jquery.fancybox.min.css"> 2 3 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> 4 5 <script src="https://cdn.staticfile.org/fancybox/3.0.47/jquery.fancybox.min.js"></script>
二、HTML代码参考
注：为使特效生效，用a标签包含img标签不是固定的，可以用li或者div,重要的是需要让img父级标签的rel参数与js一致，以及href参数与img的src参数一致
<div> <a rel="group" href="images/b1.jpg" title="图片标题"> <img alt="" src="images/s1.gif" /> </a> <a rel="group" href="images/b2.jpg" title="图片标题"> <img alt="" src="images/s2.gif" /> </a> <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"> <img alt="" src="images/s3.gif" /> </a> </div>
三、JavaScript代码参考
注：$("a[rel=group]").fancybox({}); 中被选元素应与img父级标签类型相同，如此处都为a标签
1 $(function(){ 2 //预览效果 3 $("a[rel=group]").fancybox({ 4 ‘titlePosition‘ : ‘over‘, 5 ‘cyclic‘ : true, 6 ‘titleFormat‘ : function(title, currentArray, currentIndex, currentOpts) { 7 return ‘<span id="fancybox-title-over">‘ + (currentIndex + 1) + 8 ‘ / ‘ + currentArray.length + (title.length ? ‘ ‘ + title : ‘‘) + ‘</span>‘; 9 } 10 }); 11 });
四、第三方教程地址
https://www.helloweba.com/view-blog-65.html
