【JQuery】图片灯箱插件——lightBox

最新推荐文章于 2024-05-27 09:36:31 发布

原创最新推荐文章于 2024-05-27 09:36:31 发布 · 663 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一款实用的lightBox插件，它能够以圆角形式展示图片，并提供上下翻页功能、加载进度条及自动播放等特性。通过简单的调用方式即可实现丰富交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个真的超级有用！
该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。

    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我的相册</span>
            </div>
            <div class="content">
                <div class="divPics">
                    <ul>
                        <li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片">
                            <img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
                        </a></li>
                        <li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片">
                            <img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
                        </a></li>
                        <li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片">
                            <img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" /> 
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $(".divPics a").lightBox({  
                    overlayBgColor: "red", //图片浏览时的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 100 //图片切换时的速度
                })
            });
        </script>
    </body>