jquery.lightbox.js遮罩层图片幻灯片自适应图片大小切换代码



139 553 185



特效描述:遮罩层图片 幻灯片 自适应图片 大小切换,图片左右翻页及图片放大缩小

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

3. HTML代码

<div class="imageRow">
	<div class="set">
		<div class="single first">
			<a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="images/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" /></a>
		</div>
		<div class="single">
			<a href="images/examples/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="images/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" /></a>
		</div>
		<div class="single">
			<a href="images/examples/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" /></a>
		</div>
		<div class="single last">
			<a href="images/examples/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="images/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
		</div>
	</div>
</div>



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


热门标签: 右键菜单 带标题的焦点图 文字提示框 带缩略图的幻灯片 带简介的焦点图 提示框/弹出层 图片轮播 layer 自动滚动图片轮播 lightbox 马赛克幻灯片 Tooltip工具提示框 全屏焦点图 浮动提示框 html5弹窗动画 flash焦点图 弹出层拖动 窗口提示框 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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