gallery.js很简单,直接拿到项目中使用。只要定义好结构,引入插件,便可生成类似QQ空间的轮播效果。而且它可以自动生成缩略图、相片的大小改变、选择、排序等
相册结构图
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">前一张</span>
<span class="es-nav-next">后一张</span>
</div>
<div class="es-carousel">
<ul>
<li><a href="#"><img src="images/thumbs/12.jpg" data-large="images/12.jpg" alt="HTML5手机声音提示" data-description="HTML5手机声音提示" /></a></li>
<li><a href="#"><img src="images/thumbs/9.jpg" data-large="images/9.jpg" alt="HTML5手机音频播放器" data-description="HTML5手机音频播放器" /></a></li>
<li><a href="#"><img src="images/thumbs/19.jpg" data-large="images/19.jpg" alt="jQuery+PHP实现开关效果" data-description="jQuery+PHP实现开关效果" /></a></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div>
引入相关插件
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>
定义变量js/gallery.js
var $rgGallery = $('#rg-gallery'),
// carousel container
$esCarousel = $rgGallery.find('div.es-carousel-wrapper'),
// the carousel items
$items = $esCarousel.find('ul > li'),
// total number of items
itemsCount = $items.length;
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791