通过插件实现小图和大图联动的画廊
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通过插件实现小图和大图联动的画廊c通过插件实现小图和大图联动的画廊</title>
<link type="text/css" rel="stylesheet" href="../../../jQuery插件/jQuery AD Gallery 画廊(画册)插件/jquery.ad-gallery.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../../jQuery插件/jQuery AD Gallery 画廊(画册)插件/jquery.ad-gallery.js"></script>
<style type="text/css">
*{
font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
color: red;
line-height: 140%;
}
body{
padding: 30px;
font-size: 70%;
width: 1250px;
}
.ad-thumb-list li a img{height: 40px;}
</style>
<script type="text/javascript">
$(function(){
//实例化adGallery
var galleries=$('.ad-gallery').adGallery();
//下拉列表事件
$('#switch-effect').change(function() {
galleries[0].settings.effect = $(this).val();
return false;
});
});
</script>
</head>
<body>
<div id="container" style="margin: 0px auto;width:600px;">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="../../../../百度背景皮肤/star_img/img9.jpg">
<img src="../../../../百度背景皮肤/star_img/img9.jpg" class="image0" title="美图文件名称:img9.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img12.jpg">
<img src="../../../../百度背景皮肤/star_img/img12.jpg" title="美图文件名称:img12.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img14.jpg">
<img src="../../../../百度背景皮肤/star_img/img14.jpg" title="美图文件名称:img14.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img22.jpg">
<img src="../../../../百度背景皮肤/star_img/img22.jpg" title="美图文件名称:img22.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img18.jpg">
<img src="../../../../百度背景皮肤/star_img/img18.jpg" title="美图文件名称:img18.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img15.jpg">
<img src="../../../../百度背景皮肤/star_img/img15.jpg" title="美图文件名称:img15.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img16.jpg">
<img src="../../../../百度背景皮肤/star_img/img16.jpg" title="美图文件名称:img16.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img12.jpg">
<img src="../../../../百度背景皮肤/star_img/img12.jpg" title="美图文件名称:img12.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img13.jpg">
<img src="../../../../百度背景皮肤/star_img/img13.jpg" title="美图文件名称:img13.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img20.jpg">
<img src="../../../../百度背景皮肤/star_img/img20.jpg" title="美图文件名称:img20.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img24.jpg">
<img src="../../../../百度背景皮肤/star_img/img24.jpg" title="美图文件名称:img24.jpg">
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/back_img/img6.jpg">
<img src="../../../../百度背景皮肤/back_img/img6.jpg" title="美图文件名称:img6.jpg"/>
</a>
</li>
<li>
<a href="../../../../百度背景皮肤/star_img/img4.jpg">
<img src="../../../../百度背景皮肤/star_img/img4.jpg" title="Angelababy(杨颖),1989年2月28日出生于上海市,华语影视女演员、时尚模特。2003年,Angelababy以模特身份出道,此后,她因担任时尚模特而在香港崭露头角。2007年,她开始将工作重心转向大银幕。2011年,她在爱情片《夏日乐悠悠》中首次担任女主角。2012年,凭借言情片《第一次》获得第13届华语电影传媒大奖最受瞩目女演员奖。2013年,Angelababy与其她三位女艺人被《南都娱乐周刊》选为新“四小花旦”;同年,她还完成了个人的荧屏处女作《大汉情缘之云中歌》..."/>
</a>
</li>
</ul>
</div>
</div>
</div>
<p>
选择切换效果:<select id="switch-effect">
<option value="slide-hori">水平滑动</option>
<option value="slide-vert">垂直平滑</option>
<option value="resize">收缩/伸长</option>
<option value="fade">褪色效果</option>
</select>
</p>
</div>
</body>
</html>
jQuery插件下载:
链接:https://pan.baidu.com/s/1SMrd6rqHwY2eHqx_Mlg94g 提取码:130s
展示效果:
AD Gallery插件常用参数一览表
参数 | 描述 | 默认值 |
start_at_index | 第一张展示的大照片 | 0 |
width | 照片的宽度,默认为false,为false时直接读取css的宽度 | false |
height | 照片的高度,默认为false,为false时直接读取css的高度 | false |
thumb_opacity | 设置缩略图的透明值 | 0.7 |
description_wrapper | 可以设置一个DIV用来展示照片的标题和描述信息。如description_wrapper: $('#descriptions') | false |
display_next_and_prev | 是否显示上一张下一张导航按钮 | true |
display_back_and_forward | 是否显示缩略图导航按钮 | true |
effect | 窗口标题属性 | title |
splitTitle | 设置展示效果,'slide-hori', 'slide-vert', 'fade', 'resize', 'none' | 'slide-hori' |
enable_keyboard_move | 是否使用键盘方向键切换导航 | true |
cycle | 是否循环显示照片,如果设置为false时,则到最后一张照片时就会停止切换 | true |
slideshow | 用来设置开始和暂停功能 |