基于jQuery图片弹出层切换代码。这是一款基于jquery.fancybox.js插件实现的鼠标点击弹出幻灯片切换代码。

在线预览    源码下载

实现的代码。

html代码：

 <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive">
                <a class="fancy" href="images/banner1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
                    <img src="images/banner1.jpg" />
                </a>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-3  fancybox img-responsive">
                <a class="fancy" href="images/banner2.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp">
                    <img src="images/banner2.jpg" />
                </a>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-3  fancybox img-responsive">
                <a class="fancy" href="images/banner1.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon">
                    <img src="images/banner1.jpg" />
                </a>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-3  fancybox img-responsive">
                <a class="fancy" href="images/banner2.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno">
                    <img src="images/banner2.jpg" />
                </a>
            </div>
        </div>
    </div>
    <hr>
    <center><h3>缩略图样式</h3></center><br>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive">
                <a class="fancybox-thumbs" data-fancybox-group="thumb" href="images/banner1.jpg">
                    <img src="images/banner1.jpg" alt="" />
                </a>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive">
                <a class="fancybox-thumbs" data-fancybox-group="thumb" href="images/banner2.jpg">
                    <img src="images/banner2.jpg" alt="" />
                </a>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive">
                <a class="fancybox-thumbs" data-fancybox-group="thumb" href="images/banner1.jpg">
                    <img src="images/banner1.jpg" alt="" />
                </a>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive">
                <a class="fancybox-thumbs" data-fancybox-group="thumb" href="images/banner2.jpg">
                    <img src="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

在线预览    源码下载