jQuery插件之AD Gallery插件

最新推荐文章于 2024-08-15 09:56:34 发布

 ;

最新推荐文章于 2024-08-15 09:56:34 发布

阅读量1.1k

点赞数 2

分类专栏： jQuery 文章标签： jQuery jQuery插件 jQuery AD Gallery 画廊（画册）插件 jquery.ad-gallery.js

本文链接：https://blog.csdn.net/weixin_42210229/article/details/83349035

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

通过插件实现小图和大图联动的画廊

<!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	用来设置开始和暂停功能 enable: true,//是否启用开始和暂停功能 autostart: true,是否自动播放 speed: 5000,切换时间 start_label: 'Start',开始按钮显示的内容，可以为图片按钮 stop_label: 'Stop',停止按钮显示的内容，可以为图片按钮 onStart: function() { // Do something wild when the slideshow starts }, onStop: function() { // Do something wild when the slideshow stops }