jquery.viewer.js 一款强大的多图显示效果插件-BFW插件库

jquery.viewer.js 一款强大的多图显示效果插件

jquery.viewer.js 一款强大的多图片显示效果插件

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.viewer.min", "viewer.min"], function() {
                $('#demo').viewer({
                    url: 'data-original',
                });

            });
        });
    </script>

</head>
<body style="padding:100px;">

    <ul id="demo">
        <li><a href="#"><img data-original="//repo.bfw.wiki/bfwrepo/image/demoimg.jpg" src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img data-original="//repo.bfw.wiki/bfwrepo/image/demoimg.jpg" src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img data-original="//repo.bfw.wiki/bfwrepo/image/demoimg.jpg" src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img data-original="//repo.bfw.wiki/bfwrepo/image/demoimg.jpg" src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
        <li><a href="#"><img data-original="//repo.bfw.wiki/bfwrepo/image/demoimg.jpg" src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg" alt="image01" /></a></li>
    </ul>

</body>
</html>