jquery左右按钮控制图片滚动和prettyphoto弹出层插件单击图片放大结合特效



232 925 309



特效描述:jquery 左右按钮控制 图片滚动 prettyphoto弹出层插件 图片放大结合特效,图片滚动展示单击放大代码jquery

代码结构

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/prettyPhoto.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>

3. HTML代码

<!--图片滚动-->
<div class="infopic">
	<div class="picbox">
		<ul class="gallery piclist">
			<li><a href="images/pic_1.jpg" rel="prettyPhoto[]"><img src="images/pic_1.jpg" /></a></li>
			<li><a href="images/pic_2.jpg" rel="prettyPhoto[]"><img src="images/pic_2.jpg" /></a></li>
			<li><a href="images/pic_3.jpg" rel="prettyPhoto[]"><img src="images/pic_3.jpg" /></a></li>
			<li><a href="images/pic_4.png" rel="prettyPhoto[]"><img src="images/pic_4.png" /></a></li>
			<li><a href="images/pic_5.jpg" rel="prettyPhoto[]"><img src="images/pic_5.jpg" /></a></li>
			<li><a href="images/pic_6.png" rel="prettyPhoto[]"><img src="images/pic_6.png" /></a></li>
			<li><a href="images/pic_7.jpg" rel="prettyPhoto[]"><img src="images/pic_7.jpg" /></a></li>
			<li><a href="images/pic_8.jpg" rel="prettyPhoto[]"><img src="images/pic_8.jpg" /></a></li>
			<li><a href="images/pic_9.jpg" rel="prettyPhoto[]"><img src="images/pic_9.jpg" /></a></li>
		</ul>
	</div>
	<div class="pic_prev"></div>
	<div class="pic_next"></div>
</div><!--infopic end-->
<!-- 弹出层调用 -->
<script type="text/javascript">
$(document).ready(function(){	
	$("area[rel^='prettyPhoto']").prettyPhoto();
	$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 图片淡出淡进 图片全屏 图片头像上传 图片广告 文字提示框 文字淡出淡进 文字全屏 文件上传 对联广告 提示框/弹出层 360全景 文本框 layer 下拉框 叠加浮动层 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 悬浮浮动漂浮 弹出层拖动 窗口提示框 全屏焦点图 浮动提示框 渐隐切换 全屏切换 淡出淡入淡进 切换按钮 宽屏全屏满屏 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到