微信掃碼登錄 ×
vip素材 jquery實現(xiàn)建站服務(wù)介紹左右TAB切換代碼
vip素材

jquery實現(xiàn)建站服務(wù)介紹左右TAB切換代碼

收藏
jquery實現(xiàn)建站服務(wù)介紹左右TAB切換代碼
jquery 實現(xiàn)企業(yè)建站專業(yè)的服務(wù)市場介紹左右選項卡TAB切換代碼,基于superslide插件開發(fā),結(jié)構(gòu)清晰簡單,下載即可使用。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

3、body引入HTML代碼

<div class="serve-content">
	<div class="serve-content-box">
		<div class="serve-content-title">專業(yè)的服務(wù)市場+專家講座</div>
		<div class="serve-content-text">
			<em>為您省心</em>
		</div>
		<div class="serve-content-middle">
			<div class="hd serve-content-list">
				<ul>
					<li class="on">
						<span>
							<img src="images/icon-se001.png" alt="">
						</span>
						<p>幫您設(shè)計</p>
					</li>
					<li>
						<span>
							<img src="images/icon-se002.png" alt="">
						</span>
						<p>幫您對接</p>
					</li>
					<li>
						<span>
							<img src="images/icon-se003.png" alt="">
						</span>
						<p>幫您上架</p>
					</li>
				</ul>
			</div>
			<div class="bd serve-content-info">
				<ul>
					<li>
						<div class="serve-image-img">
							<img src="images/switch001.jpg" alt="">
						</div>
						<div class="serve-image-box">
							<div class="serve-image-comm1">
								<img src="images/icon-fl.png" alt="">
							</div>
							<div class="serve-image-info">
								<div class="serve-image-info-title">
									<span>
										<img src="images/icon-item001.png" alt="">
									</span>
									<p>幫您設(shè)計</p>
								</div>
								<strong>無需您自己操作,專業(yè)設(shè)計幫您量身定做,打造您的專屬網(wǎng)站,讓您的網(wǎng)站不再和人“撞衫”。</strong>
							</div>
							<div class="serve-image-comm2">
								<img src="images/icon-fr.png" alt="">
							</div>
						</div>
					</li>
				</ul>
				<ul>
					<li>
						<div class="serve-image-img">
							<img src="images/switch002.jpg" alt="">
						</div>
						<div class="serve-image-box">
							<div class="serve-image-comm1">
								<img src="images/icon-fl.png" alt="">
							</div>
							<div class="serve-image-info">
								<div class="serve-image-info-title">
									<span>
										<img src="images/icon-item002.png" alt="">
									</span>
									<p>幫您對接</p>
								</div>
								<strong>第三方支付、登錄等對接幫您搞定,再也不用煩惱第三方對接的問題啦!專人為您調(diào)試接口,VIP待遇任您享受。</strong>
							</div>
							<div class="serve-image-comm2">
								<img src="images/icon-fr.png" alt="">
							</div>
						</div>
					</li>
				</ul>
				<ul>
					<li>
						<div class="serve-image-img">
							<img src="images/switch003.jpg" alt="">
						</div>
						<div class="serve-image-box">
							<div class="serve-image-comm1">
								<img src="images/icon-fl.png" alt="">
							</div>
							<div class="serve-image-info">
								<div class="serve-image-info-title">
									<span>
										<img src="images/icon-item003.png" alt="">
									</span>
									<p>幫您上架</p>
								</div>
								<strong>從一鍵生成APP到上架,一條龍服務(wù),告別繁雜的操作和長時間的等待流程。來建站ABC,我們幫您上架。</strong>
							</div>
							<div class="serve-image-comm2">
								<img src="images/icon-fr.png" alt="">
							</div>
						</div>
					</li>
				</ul>
				<ul>
					<li>
						<div class="serve-image-img">
							<img src="images/switch004.jpg" alt="">
						</div>
						<div class="serve-image-box">
							<div class="serve-image-comm1">
								<img src="images/icon-fl.png" alt="">
							</div>
							<div class="serve-image-info">
								<div class="serve-image-info-title">
									<span>
										<img src="images/icon-item004.png" alt="">
									</span>
									<p>幫您建站</p>
								</div>
								<strong>不會技術(shù)也無妨,專業(yè)建站幫您一鍵搭建網(wǎng)站,不再為技術(shù)擔(dān)憂,來建站ABC,享受專業(yè)的建站服務(wù)。</strong>
							</div>
							<div class="serve-image-comm2">
								<img src="images/icon-fr.png" alt="">
							</div>
						</div>
					</li>
				</ul>
				<ul>
					<li>
						<div class="serve-image-img">
							<img src="images/switch005.jpg" alt="">
						</div>
						<div class="serve-image-box">
							<div class="serve-image-comm1">
								<img src="images/icon-fl.png" alt="">
							</div>
							<div class="serve-image-info">
								<div class="serve-image-info-title">
									<span>
										<img src="images/icon-item005.png" alt="">
									</span>
									<p>幫您維護(hù)</p>
								</div>
								<strong>幫你上傳維護(hù)內(nèi)容,無需復(fù)雜操作,一切內(nèi)容我們來幫您解決,省去無數(shù)煩惱。</strong>
							</div>
							<div class="serve-image-comm2">
								<img src="images/icon-fr.png" alt="">
							</div>
						</div>
					</li>
				</ul>
				<ul>
					<li>
						<div class="serve-image-img">
							<img src="images/switch006.jpg" alt="">
						</div>
						<div class="serve-image-box">
							<div class="serve-image-comm1">
								<img src="images/icon-fl.png" alt="">
							</div>
							<div class="serve-image-info">
								<div class="serve-image-info-title">
									<span>
										<img src="images/icon-item006.png" alt="">
									</span>
									<p>學(xué)院培訓(xùn)</p>
								</div>
								<strong>專家培訓(xùn),為您量身定做培訓(xùn)方案,隨時隨地幫您排憂解難,答疑解惑。</strong>
							</div>
							<div class="serve-image-comm2">
								<img src="images/icon-fr.png" alt="">
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="hd serve-content-list">
				<ul>
					<li>
						<span>
							<img src="images/icon-se004.png" alt="">
						</span>
						<p>幫您建站</p>
					</li>
					<li>
						<span>
							<img src="images/icon-se005.png" alt="">
						</span>
						<p>幫您維護(hù)</p>
					</li>
					<li>
						<span>
							<img src="images/icon-se006.png" alt="">
						</span>
						<p>學(xué)院培訓(xùn)</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="serve-content-btn">
			<a href="#">免費(fèi)注冊</a>
		</div>
	</div>
</div>

<script type="text/javascript">
	
	jQuery(".serve-content-middle").slide({
		effect: "fade",
		trigger: "mouseover",
		delayTime: 800
	});

</script> 

使用聲明

1. 本站所有素材(未指定商用),僅限學(xué)習(xí)交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請勿用于商業(yè)用途,會員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材,否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途,織夢系統(tǒng)商業(yè)用途請預(yù)先授權(quán)。

  • 軟件 Dreamweaver
  • 格式 HTML
  • 作者 歪秀
x
×
×

注冊

QQ注冊 立即下載 微信注冊 立即下載

簽到成功!

已連續(xù)簽到1天,連續(xù)簽到3天可獲得50積分

知道了