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="#">免費注冊</a>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(".serve-content-middle").slide({
effect: "fade",
trigger: "mouseover",
delayTime: 800
});
</script>