<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery图片相册插件simpleGal - 代码者</title>
<style>
* { margin: 0; padding: 0;}
body { background-color: #eee;}
.gallery { width: 610px; margin: 0 auto;}
.gallery img { display: block;}
.main-image img { padding: 4px; border: 1px solid #ccc; background-color: #fff;}
.thumbnails { height: 63px; margin: 15px 0 0 -15px; list-style-type: none;}
.thumbnails li { float: left; margin-left: 15px; display: inline;}
.thumbnails img { padding: 4px; border: 1px solid #ccc; background-color: #fff;}
</style>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的jQuery图片相册插件simpleGal演示</h1>
<div class="gallery">
<div class="main-image">
<img src="images/big1.jpg" alt="Placeholder" class="custom">
</div>
<ul class="thumbnails">
<li><a href="images/big1.jpg"><img src="images/thumbnail1.jpg" alt=""></a></li>
<li><a href="images/big2.jpg"><img src="images/thumbnail2.jpg" alt=""></a></li>
<li><a href="images/big3.jpg"><img src="images/thumbnail3.jpg" alt=""></a></li>
<li><a href="images/big4.jpg"><img src="images/thumbnail4.jpg" alt=""></a></li>
<li><a href="images/big5.jpg"><img src="images/thumbnail5.jpg" alt=""></a></li>
</ul>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.simpleGal.js"></script>
<script>
$(document).ready(function () {
$('.thumbnails').simpleGal({
mainImage: '.custom'
});
});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.daimazhe.com/" target="_blank">代码者</a></p>
</div>
</body>
</html>
jQuery图片相册插件simpleGal
需积分: 10 72 浏览量
2014-02-24
14:23:24
上传
评论
收藏 407KB ZIP 举报
jQuery图片相册插件simpleGal.zip （15个子文件） 
0363 
index.html 2KB images 
thumbnail5.jpg 5KB thumbnail4.jpg 5KB thumbnail3.jpg 5KB big3.jpg 60KB thumbnail2.jpg 5KB thumbnail1.jpg 5KB big2.jpg 65KB big4.jpg 68KB big5.jpg 94KB big1.jpg 61KB js 
jquery.simpleGal.js 585B jquery-1.8.3.min.js 91KB 精品免费商业源码下载.url 152B 精美众多JS广告代码.url 152B资源评论
