<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片灯箱--lightBox</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.imooc.com/data/jquery.notesforlightbox.css" />
<link rel="stylesheet" href="css/lightBox.css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我的相册</span>
</div>
<div class="content">
<div class="divPics">
<ul>
<li><a href="images/Hydrangeas.jpg" title="第一页图片">
<img src="images/Hydrangeas.jpg" />
</a></li>
<li><a href="images/Jellyfish.jpg" title="第二页">
<img src="images/Jellyfish.jpg" />
</a></li>
<li><a href="images/Koala.jpg" title="第三页">
<img src="images/Koala.jpg" />
</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
$(".divPics a").lightBox({
overlayBgColor:"pink",//图片浏览时的背景色
overlayOpacity:0.4,//背景色的透明度
containerResizeSpeed:300//图片切换时的速度
});
});
</script>
