<!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://idcbgp.cn/data/jquery.notesforlightbox.js"></script>
<link?rel="stylesheet"?type="text/css"?href="http://idcbgp.cn/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>
2017-02-07
? ? ? ? <link rel="stylesheet" type="text/css" href="http://idcbgp.cn/data/jquery.notesforlightbox.css" />
? ? ? ? <script type="text/javascript" src="http://idcbgp.cn/data/jquery-1.8.2.min.js"></script>
? ? ? ? <script type="text/javascript" src="http://idcbgp.cn/data/jquery.notesforlightbox.js"></script>
用這3個庫試一下，我這邊可以
2017-02-23
$(".divPics a").lightBox({
加上這行代碼也不行
2017-02-23
我的不能自動播放怎么回事 求指教
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
? ? <head>
? ? ? ? <title>圖片燈箱插件</title>
? ? ? ? <link rel="stylesheet" type="text/css" href="http://idcbgp.cn/data/jquery.notesforlightbox.css" />
? ? ? ? <link href="style.css" rel="stylesheet" type="text/css" />
? ? ? ? <script type="text/javascript" src="http://idcbgp.cn/data/jquery-1.8.2.min.js"></script>
? ? ? ? <script type="text/javascript" src="http://idcbgp.cn/data/jquery.notesforlightbox.js"></script>
? ? </head>
? ??
? ? <body>
? ? ? ? <div id="divtest">
? ? ? ? ? ? <div class="title">
? ? ? ? ? ? ? ? <span class="fl">我的相冊</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="content">
? ? ? ? ? ? ? ? <div class="divPics">
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li><a title="第1篇風(fēng)景圖片">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="http://img1.sycdn.imooc.com//52e489f20001ecfc04480275.jpg" alt="" />
? ? ? ? ? ? ? ? ? ? ? ? </a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a title="第2篇風(fēng)景圖片">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="http://img1.sycdn.imooc.com//52e48a1e0001eec804480275.jpg" alt="" />
? ? ? ? ? ? ? ? ? ? ? ? </a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a title="第3篇風(fēng)景圖片">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="http://img1.sycdn.imooc.com//52e48a4c00015ad204480275.jpg" alt="" />
? ? ? ? ? ? ? ? ? ? ? ? </a></li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ??
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(function () {
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? overlayBgColor: "#666", //圖片瀏覽時的背景色
? ? ? ? ? ? ? ? ? ? overlayOpacity: 0.5, //背景色的透明度
? ? ? ? ? ? ? ? ? ? containerResizeSpeed: 600 //圖片切換時的速度
? ? ? ? ? ? ? ? })
? ? ? ? ? ? });
? ? ? ? </script>
? ? </body>
</html>
2017-02-08
jq版本換成1.8.2就可以，寫成1.11.3為什么就不行呢