jQuery图片浏览控件lightBox
Posted 小松博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery图片浏览控件lightBox相关的知识，希望对你有一定的参考价值。
下面我来写一个demo简单演示一下
首先下载lightBox插件,取出插件需要的文件
css/lightbox.css
js/jquery-1.11.0.min.js
js/lightbox.js
新建demo.html，内容为
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>
<a href="https://static.phpsong.com/wp-content/uploads/2015/03/2015032206005571160.jpg" data-lightbox="roadtrip"><img src="https://static.phpsong.com/wp-content/uploads/2015/03/2015032206005571160-220x150.jpg" width="220" height="150"></a>
<a href="https://static.phpsong.com/wp-content/uploads/2015/03/2015030609524411958.jpg" data-lightbox="roadtrip"><img src="https://static.phpsong.com/wp-content/uploads/2015/03/2015030609524411958.jpg" width="220" height="150"></a>
<a href="https://static.phpsong.com/wp-content/uploads/2015/03/2015031712391081884.jpg" data-lightbox="roadtrip"><img src="https://static.phpsong.com/wp-content/uploads/2015/03/2015031712391081884.jpg" width="220" height="150"></a>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
直接预览
点击图片的效果
QQ交流群：136351212(满) 455721967
以上是关于jQuery图片浏览控件lightBox的主要内容，如果未能解决你的问题，请参考以下文章