jquery html5 slider立式展柜产品图片文字上下滑动交替显示



106 421 141



特效描述:jquery html5 slider 图片文字上下滑动 交替显示,模仿宜家商品垂直展示效果

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Dosis:200,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

3. HTML代码

<section id="ps-container" class="ps-container">
	<div class="ps-header">
		<h1>立式展柜滑块</h1>
	</div>
	<div class="ps-contentwrapper">
		<div class="ps-content">
			<h2>伯恩哈德</h2>
			<span class="ps-price">£100</span>
			<p>随着在座椅上舒适的弹性;防止静电的会议,并提供增强的乘坐舒适性。为提高乘坐舒适性的软垫座椅和背部。柔软,耐磨和容易护理皮革,优雅的青睐。</p>
			<a href="http://www.51qianduan.com/">购买该商品</a>
		</div>
		<div class="ps-content">
			<h2>托比亚斯</h2>
			<span class="ps-price">£65</span>
			<p>为了提高稳定性,重新拧紧螺丝组装后大约两个星期。座,背与宁静的灵活性;防止静态坐姿和提升舒适度。</p>
			<a href="http://www.51qianduan.com/">购买该商品</a>
		</div>
		<div class="ps-content">
			<h2>Pöang</h2>
			<span class="ps-price">£140</span>
			<p>帧层胶合弯曲桦木制成的,非常结实耐用的材料。高靠背提供了极大的支持,你的脖子。羊皮具有天然的绝缘特性,这使它感到温暖和舒适,坐上去。提供额外的垫子变化和更新。</p>
			<a href="http://www.51qianduan.com/">购买该商品</a>
		</div>
		<div class="ps-content">
			<h2>Mellby</h2>
			<span class="ps-price">£195</span>
			<p>易于保持清洁;可拆卸,机洗。座垫顶层记忆泡沫;模具的精确您的身体轮廓,并恢复它的形状,当你起床。</p>
			<a href="http://www.51qianduan.com/">购买该商品</a>
		</div>
		<div class="ps-content">
			<h2>Torbjörn</h2>
			<span class="ps-price">£30</span>
			<p>一个舒适的坐姿高度可调。倾斜的座椅给人以舒适的坐姿,当斜靠转发。</p>
			<a href="http://www.51qianduan.com/">购买该商品</a>
		</div>
	</div>
	<div class="ps-slidewrapper">
		<div class="ps-slides">
			<div style="background-image:url(images/1.jpg);"></div>
			<div style="background-image:url(images/2.jpg);"></div>
			<div style="background-image:url(images/3.jpg);"></div>
			<div style="background-image:url(images/4.jpg);"></div>
			<div style="background-image:url(images/5.jpg);"></div>
		</div>
		<div class="nav">
			<a href="#" class="ps-prev" ></a>
			<a href="#" class="ps-next" ></a>
		</div>
	</div>
</section>
<script type="text/javascript">
$(function(){
	Slider.init();
});
</script>



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


热门标签: 滑动导航菜单 导航切换 图片头像上传 滑动选项卡切换 文件上传 图片滑动 图片切换 文本框 文字滑动 文字切换 下拉框 滑动手风琴 背景切换 复选 滑动星星打分 手风琴 单选 选项卡自动切换 登录框 视频切换 注册框 列表切换 搜索框 验证码 渐隐切换 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滑动滑过 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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