jQuery圖標導航滑動切換全屏選項卡代碼



123 488 163



特效描述:jQuery圖標導航 滑動切換 全屏選項卡,jQuery全屏背景圖片選項卡切換,制作大氣的圖標導航滑動控制對應的選項卡tab切換代碼。

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/SuperSlide.js"></script>

3. HTML代碼

<div class="index-page">
	<div class="solution-more">
		<div class="solution-more-slide">
			<div class="container">
				<div class="hd">
					<ul>
						<li class="item-1 on">
							<i></i>
							<div class="text">
								<h3>新零售</h3>
								<p>線上線下全渠道覆蓋</p>
							</div>
						</li>
						<li class="item-2">
							<i></i>
							<div class="text">
								<h3>新型O2O</h3>
								<p>滿足社區電商多角色需求</p>
							</div>
						</li>
						<li class="item-3">
							<i></i>
							<div class="text">
								<h3>移動分銷</h3>
								<p>微信分銷解決方案</p>
							</div>
						</li>
						<li class="item-4">
							<i></i>
							<div class="text">
								<h3>跨境電商</h3>
								<p>成熟的跨境交易平臺</p>
							</div>
						</li>
						<li class="item-5">
							<i></i>
							<div class="text">
								<h3>同城電商</h3>
								<p>本地特色購物平臺</p>
							</div>
						</li>
						<li class="item-6">
							<i></i>
							<div class="text">
								<h3>連鎖超市</h3>
								<p>提升效率,降低成本</p>
							</div>
						</li>
					</ul>
				</div>
				<ul class="bd" style="position: relative; width: 1920px; height: 600px;">
					<li class="item-1" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: list-item;">
						<div class="container">
							<div class="inner">
								<h2>新零售解決方案</h2>
								<dl class="intro">
									<dt>行業背景</dt>
									<dd>自馬云提出新零售概念起,越來越多的公司開始將線上互聯網力量與線下實體店終端結合,進一步推進線上線下一體化進程。為此模板堂推出新零售解決方案,以減少企業的落地成本,打造線上+線下+物流相結合的新零售平臺</dd>
									<dt>方案效益</dt>
									<dd>助力企業快速打造以消費者為核心,在會員、支付、庫存、物流等數據方面全方位打通的新零售平臺</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解詳情</a>
									<a href="javascript:;" class="btn-2">獲取方案</a>
								</div>
								<div class="example">
									<h3>相關客戶案例</h3>
									<ul>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
										<li>
											<img src="img/logo4.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li class="item-2" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: none;">
						<div class="container">
							<div class="inner">
								<h2>新型O2O解決方案</h2>
								<dl class="intro">
									<dt>行業背景</dt>
									<dd>傳統O2O只是線上訂貨,線下送貨,已經無法滿足現代化電商模式的需求,模板堂旗下的ECJia到家產品,滿足從消費者、商家管理、平臺運營、配送員送貨等多角色需求,打造新型O2O電商模式</dd>
									<dt>方案效益</dt>
									<dd>整合周邊門店入駐,對接配送員上門送貨,POS機收款等一站式社區電商服務</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解詳情</a>
									<a href="javascript:;" class="btn-2">獲取方案</a>
								</div>
								<div class="example">
									<h3>相關客戶案例</h3>
									<ul>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
										<li>
											<img src="img/logo2.png" alt="">
										</li>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li class="item-3" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: none;">
						<div class="container">
							<div class="inner">
								<h2>移動分銷解決方案</h2>
								<dl class="intro">
									<dt>移動分銷解決方案</dt>
									<dd>分銷作為網絡推廣的熱門玩法,必須了解其深層的業務模式,根據業務模式的特點開發功能,模板堂根據微信易于分享推廣的特性,用針對性的產品為商家打造移動分銷解決方案</dd>
									<dt>方案效益</dt>
									<dd>快速建立一支分銷軍團,讓消費者變成你的銷售員,迅猛增長銷量</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解詳情</a>
									<a href="javascript:;" class="btn-2">獲取方案</a>
								</div>
								<div class="example">
									<h3>相關客戶案例</h3>
									<ul>
										<li>
											<img src="img/logo4.png" alt="">
										</li>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li class="item-4" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: none;">
						<div class="container">
							<div class="inner">
								<h2>跨境電商解決方案</h2>
								<dl class="intro">
									<dt>行業背景</dt>
									<dd>近年來跨境外貿交易進行的如火如荼,隨著消費主力群體從以80后為代表擴散到以泛90后、95后為代表,消費觀念也從講求性價比轉向注重品質,對進口優質商品的需求爆發式增長</dd>
									<dt>方案效益</dt>
									<dd>模板堂通過跨境通產品,為你打造一個專業的跨境電商交易平臺</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解詳情</a>
									<a href="javascript:;" class="btn-2">獲取方案</a>
								</div>
								<div class="example">
									<h3>相關客戶案例</h3>
									<ul>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
										<li>
											<img src="img/logo2.png" alt="">
										</li>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li class="item-5" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: none;">
						<div class="container">
							<div class="inner">
								<h2>同城電商解決方案</h2>
								<dl class="intro">
									<dt>行業背景</dt>
									<dd>隨著以O2O模式為核心、移動互聯網為載體的電商3.0時代正式來臨,本地化電商優勢漸顯。現今同城網購越發火熱,各大城市電商購買潛力和價值尚待開發</dd>
									<dt>方案效益</dt>
									<dd>面向同城零售交易,搭建線上電商平臺,集合當地特色商品向消費者提供一站式綜合服務</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解詳情</a>
									<a href="javascript:;" class="btn-2">獲取方案</a>
								</div>
								<div class="example">
									<h3>相關客戶案例</h3>
									<ul>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
										<li>
											<img src="img/logo4.png" alt="">
										</li>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li class="item-6" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: none;">
						<div class="container">
							<div class="inner">
								<h2>連鎖超市解決方案</h2>
								<dl class="intro">
									<dt>行業背景</dt>
									<dd>隨著亞馬遜的無人自助店的問世,傳統連鎖超市已經逐漸面臨著競爭壓力,如何更高效的運營門店,給消費者帶來便捷,同時降低門店的人員成本,成為了眾多連鎖超市商家一直思考的問題</dd>
									<dt>方案效益</dt>
									<dd>通過技術讓消費者自動掃碼結算,無需注冊,降低門店運營成本</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解詳情</a>
									<a href="javascript:;" class="btn-2">獲取方案</a>
								</div>
								<div class="example">
									<h3>相關客戶案例</h3>
									<ul>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
										<li>
											<img src="img/logo2.png" alt="">
										</li>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(".solution-more-slide").slide({
		effect: 'fold'
	});
	//hover
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動選項卡 滑動切換 滾動切換 滾動條切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 全屏焦點圖 漸隱切換 全屏切換 淡出淡進 淡出 淡進 寬屏全屏 寬屏 全屏 頁面全屏 頁面寬屏 其他 滑動導航菜單 滑動導航 滑動菜單 導航切換 菜單切換 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 文字淡出淡進 文字淡出 文字淡進 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

湖北30选5开奖结果走势图表