jq全屏平滑移动_自适应图片全屏滑动切换



147 584 195



特效描述:jq 全屏平滑移动 自适应图片 全屏滑动切换,jq全屏平滑移动

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/parallaxSlider.js"></script>

3. HTML代码

		<div id="pxs_container" class="pxs_container">
			<div class="pxs_bg">
				<div class="pxs_bg1"></div>
				<div class="pxs_bg2"></div>
				<div class="pxs_bg3"></div>
			</div>
			<div class="pxs_loading">读取照片……</div>
			<div class="pxs_slider_wrapper">
				<ul class="pxs_slider">
					<li><img src="images/1.jpg" alt="在青春之书里,我们同在一行字之间。被窝是青春的坟墓。关于少年时代,冷暖自如,是朴素的生活,与最遥远的梦想。这一切将在被回忆肆意篡改的书写下,渐渐抽象成一些雾一样的尘埃,浮在梦境之外的空茫黑暗中,日日夜夜不停坠落,终会尘埃落定。" /></li>
					<li><img src="images/2.jpg" alt="这年写下了《写在2011的元旦》。她说,回顾昨日看到了写作带给我的另一种形而上的成长,而今看来已是落嗦繁冗的羞人之笔,但之所以鄙弃过去是因为有所进步。" /></li>
					<li><img src="images/3.jpg" alt="无数个阳光和熙的下午,好奋斗的同学已在一桌一椅之间树起一座惊奇的雕像。他们手中的毛像刀像剑一样锋利无比,他们脸上的笑容宛如初春的花一样艳美有余,他们心中的志向比天还高,比海更深……" /></li>
					<li><img src="images/4.jpg" alt=" 我觉得自己像个年轻的公主,穿着华美的袍,站在悬崖上歌泣。灵魂游离不定。辗转中的快乐在百转千回中碎成一地琉璃。" /></li>
					<li><img src="images/5.jpg" alt="曾在一本杂志上看过这样一段话:“在歌舞升平的和平年代,青春在一代又一代人中老去,又在一代又一代人中成长。回望起来,不止华衣与爱情,不止学习与时尚,不止鲜血与革命,不止奋斗与理想,不止英雄与奉献。”" /></li>
					<li><img src="images/6.jpg" alt="原来有些事真的是不经意的残缺,有些人真的是出乎意料的命中注定……无论上天给我怎么样我躯体,我已上演了十八年的悲欢离合。" /></li>
					<li><img src="images/7.jpg" alt="青春依然是一道夹着摇滚味道的安魂曲。我们还没有到只剩下回忆的年龄,我们还能把快乐写得源远流长。" /></li>
				</ul>
				<div class="pxs_navigation">
					<span class="pxs_next"></span>
					<span class="pxs_prev"></span>
				</div>
				<div class="pxs_description"></div>
				<ul class="pxs_thumbnails">
					<li><img src="images/thumbs/1.jpg" alt="First Image" /></li>
					<li><img src="images/thumbs/2.jpg" alt="Second Image" /></li>
					<li><img src="images/thumbs/3.jpg" alt="Third Image" /></li>
					<li><img src="images/thumbs/4.jpg" alt="Forth Image" /></li>
					<li><img src="images/thumbs/5.jpg" alt="Fifth Image" /></li>
					<li><img src="images/thumbs/6.jpg" alt="Sixth Image" /></li>
					<li><img src="images/thumbs/7.jpg" alt="Sixth Image" /></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
		$(function() {
			var $pxs_container	= $('#pxs_container');
			$pxs_container.parallaxSlider();
		});
        </script>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 图片放大镜 图片叠加 图片层叠 图片翻转 图片旋转 图片延迟加载 图片延迟 图片加载 图片淡出淡进 图片淡出 图片淡进 图片全屏 头像上传 图片上传 二维码 图片拖动 图片拖拽 图片广告 带缩略图的幻灯片 h5图片动画 h5图标动画 html5图片动画 html5图标动画 地图 中国地图 世界地图 滚动切换 滚动条切换 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 滑动选项卡 滑动切换 纯图片轮播 图片轮播 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片滚动 图片滚动条 图片滑动 图片滑块 图片收缩展开 图片收缩 图片展开 图片切换 图片选项卡 图标选项卡 图标导航 图标菜单 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 背景切换 大图切换 滑动手风琴 全屏焦点图 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 全屏切换 切换按钮 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 图表 表单 表单美化 表单插件 表单美化插件 图片 图片插件 头像截图 图片全屏 图片滚动 图片滚动条 图片切换 图片选项卡 图标选项卡 图片切换 切换图片 按钮控制 图片滑动 滑动图片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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