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



65 257 86



特效描述: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>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 图片滑动 图片滑块 文字滑动 文字滑块 文字切换 文字选项卡 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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