jquery html5 slider立式展柜產品圖片文字上下滑動交替顯示



66 263 88



特效描述: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.cqetom.live/">購買該商品</a>
		</div>
		<div class="ps-content">
			<h2>托比亞斯</h2>
			<span class="ps-price">£65</span>
			<p>為了提高穩定性,重新擰緊螺絲組裝后大約兩個星期。座,背與寧靜的靈活性;防止靜態坐姿和提升舒適度。</p>
			<a href="http://www.cqetom.live/">購買該商品</a>
		</div>
		<div class="ps-content">
			<h2>P?ang</h2>
			<span class="ps-price">£140</span>
			<p>幀層膠合彎曲樺木制成的,非常結實耐用的材料。高靠背提供了極大的支持,你的脖子。羊皮具有天然的絕緣特性,這使它感到溫暖和舒適,坐上去。提供額外的墊子變化和更新。</p>
			<a href="http://www.cqetom.live/">購買該商品</a>
		</div>
		<div class="ps-content">
			<h2>Mellby</h2>
			<span class="ps-price">£195</span>
			<p>易于保持清潔;可拆卸,機洗。座墊頂層記憶泡沫;模具的精確您的身體輪廓,并恢復它的形狀,當你起床。</p>
			<a href="http://www.cqetom.live/">購買該商品</a>
		</div>
		<div class="ps-content">
			<h2>Torbj?rn</h2>
			<span class="ps-price">£30</span>
			<p>一個舒適的坐姿高度可調。傾斜的座椅給人以舒適的坐姿,當斜靠轉發。</p>
			<a href="http://www.cqetom.live/">購買該商品</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

加群請備注:從官網了解到

老夫子电子