基于jQuery图片弹出层切换代码。这是一款基于jquery.fancybox.js插件实现的鼠标点击弹出幻灯片切换代码。
在线预览 源码下载
实现的代码。
html代码：
<divclass="container"><divclass="row"><divclass="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"><aclass="fancy"href="images/banner1.jpg"data-fancybox-group="gallery"title="Loremipsum dolor sit amet"><imgsrc="images/banner1.jpg"/></a></div><divclass="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"><aclass="fancy"href="images/banner2.jpg"data-fancybox-group="gallery"title="Etiam quis mi eu elit temp"><imgsrc="images/banner2.jpg"/></a></div><divclass="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"><aclass="fancy"href="images/banner1.jpg"data-fancybox-group="gallery"title="Cras neque mi, semper leon"><imgsrc="images/banner1.jpg"/></a></div><divclass="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"><aclass="fancy"href="images/banner2.jpg"data-fancybox-group="gallery"title="Sed vel sapien vel sem uno"><imgsrc="images/banner2.jpg"/></a></div></div></div><hr><center><h3>缩略图样式</h3></center><
br><divclass="container"><divclass="row"><divclass="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"><aclass="fancybox-thumbs"data-fancybox-group="thumb"href="images/banner1.jpg"><imgsrc="images/banner1.jpg"alt=""/></a></div><divclass="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"><aclass="fancybox-thumbs"data-fancybox-group="thumb"href="images/banner2.jpg"><imgsrc="images/banner2.jpg"alt=""/></a></div><divclass="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"><aclass="fancybox-thumbs"data-fancybox-group="thumb"href="images/banner1.jpg"><imgsrc="images/banner1.jpg"alt=""/></a></div><divclass="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"><aclass="fancybox-thumbs"data-fancybox-group="thumb"href="images/banner2.jpg"><imgsrc="images/banner2.jpg"alt=""/></a></div></div></div>
js代码：
$(document).ready(function() {
$('.fancy').fancybox();
$('.fancybox-thumbs').fancybox({PRevEffect:'none',
nextEffect:'none',
closeBtn:false,
arrows:false,
nextClick:true,
helpers: {
thumbs: {
width:50,
height:50}
}
});
});
via：http://www.w2bc.com/article/2015-09-27-jquery-fancybox