jQuery仿京東云產(chǎn)品系列圖標(biāo)導(dǎo)航tab切換效果。京東云成熟、領(lǐng)先的解決方案，行業(yè)縱深，直達(dá)痛點(diǎn)，專業(yè)經(jīng)驗(yàn)為您解決多種業(yè)務(wù)難題。
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、head引入js文件
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
3、body引入HTML代碼
<div class="yun-main-solution">
<div class="yun-main-hd">
<h3 class="yun-main-title">成熟、領(lǐng)先的解決方案</h3>
<p class="yun-main-des">行業(yè)縱深，直達(dá)痛點(diǎn)，專業(yè)經(jīng)驗(yàn)為您解決多種業(yè)務(wù)難題</p>
</div>
<div class="yun-main-bd">
<div class="yun-solution-slider-content">
<ul class="yun-solution-wrap">
<li class="yun-solution-item wapSolution current" style="background: url(statics/images/dsy.jpg) center center no-repeat;">
<div class="yun-solution-item-content">
<div class="yun-solution-text-wrap">
<dl><dt class="yun-solution-title"><em>電商云</em> </dt>
<dd class="yun-solution-des">在云計(jì)算和大數(shù)據(jù)基礎(chǔ)上，結(jié)合了京東十多年電子商務(wù)技術(shù)及運(yùn)營經(jīng)驗(yàn)，推出幫助傳統(tǒng)企業(yè)互聯(lián)網(wǎng)轉(zhuǎn)型和打破人、貨、場邊界的無界零售電商解決方案。</dd>
</dl>
<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
</div>
</div>
</li>
<li class="yun-solution-item wapSolution" style="background: url(statics/images/tgy.jpg) center center no-repeat;">
<div class="yun-solution-item-content">
<div class="yun-solution-text-wrap">
<dl><dt class="yun-solution-title"><em>托管云</em> </dt>
<dd class="yun-solution-des">整合京東云豐富的云資源，為您提供穩(wěn)定、安全、經(jīng)濟(jì)的應(yīng)用托管解決方案。一站式服務(wù)，業(yè)務(wù)輕松上云；彈性擴(kuò)展，輕松應(yīng)對業(yè)務(wù)快速增長；全方面安全防護(hù)，保障業(yè)務(wù)數(shù)據(jù)安全。</dd>
</dl>
<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
</div>
</div>
</li>
<li class="yun-solution-item" style="background: url(statics/images/sjy.jpg) center center no-repeat;">
<div class="yun-solution-item-content">
<div class="yun-solution-text-wrap">
<dl><dt class="yun-solution-title"><em>數(shù)據(jù)云</em> </dt>
<dd class="yun-solution-des">結(jié)合京東“完善高質(zhì)的數(shù)據(jù)鏈+豐富的業(yè)務(wù)場景+強(qiáng)大的數(shù)據(jù)分析能力”，京東云大數(shù)據(jù)處理引擎充分覆蓋各行業(yè)大數(shù)據(jù)需求。京東云大數(shù)據(jù)專家團(tuán)隊(duì)將根據(jù)用戶具體需求，提供豐富的解決方案。</dd>
</dl>
<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
</div>
</div>
</li>
<li class="yun-solution-item wapSolution" style="background: url(statics/images/wly.jpg) center center no-repeat;">
<div class="yun-solution-item-content">
<div class="yun-solution-text-wrap">
<dl><dt class="yun-solution-title"><em>物流云</em> </dt>
<dd class="yun-solution-des">依托京東穩(wěn)定、高效、靈活的云計(jì)算和大數(shù)據(jù)能力，為政府和企業(yè)提供物流技術(shù)、產(chǎn)品及運(yùn)營咨詢服務(wù)，降低用戶自建物流成本，提升物流運(yùn)營效率，助力政企互聯(lián)網(wǎng)+物流轉(zhuǎn)型升級。</dd>
</dl>
<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
</div>
</div>
</li>
<li class="yun-solution-item" style="background: url(statics/images/zny.jpg) center center no-repeat;">
<div class="yun-solution-item-content">
<div class="yun-solution-text-wrap">
<dl><dt class="yun-solution-title"><em>智能云</em> </dt>
<dd class="yun-solution-des">依托京東云技術(shù)和大數(shù)據(jù)能力，整合京東在互聯(lián)網(wǎng)市場的優(yōu)質(zhì)資源，提供技術(shù)支持、智能產(chǎn)品對接、智能創(chuàng)業(yè)孵化等服務(wù)，加速政府、企業(yè)及個(gè)人在“互聯(lián)網(wǎng)+智能”創(chuàng)新轉(zhuǎn)型。</dd>
</dl>
<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
</div>
</div>
</li>
<li class="yun-solution-item" style="background: url(statics/images/cyy.jpg) center center no-repeat;">
<div class="yun-solution-item-content">
<div class="yun-solution-text-wrap">
<dl><dt class="yun-solution-title"><em>產(chǎn)業(yè)云</em> </dt>
<dd class="yun-solution-des">立足產(chǎn)業(yè)客戶的行業(yè)需求，依托京東云強(qiáng)大的技術(shù)與云產(chǎn)品；并結(jié)合京東的互聯(lián)網(wǎng)+的實(shí)踐經(jīng)驗(yàn)與集團(tuán)資源；透過京東云專業(yè)服務(wù)，共筑行業(yè)標(biāo)桿與業(yè)界領(lǐng)先的產(chǎn)業(yè)解決方案。</dd>
</dl>
<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
</div>
</div>
</li>
<li class="yun-solution-item" style="background: url(statics/images/jry.jpg) center center no-repeat;">
<div class="yun-solution-item-content">
<div class="yun-solution-text-wrap">
<dl><dt class="yun-solution-title"><em>金融云</em> </dt>
<dd class="yun-solution-des">采用獨(dú)立的機(jī)房集群，與公有云物理隔離。基于兩地三中心的機(jī)房布局，滿足一行三會對于金融業(yè)的監(jiān)管要求。幫助金融客戶從現(xiàn)有傳統(tǒng)IT邁向大數(shù)據(jù)和云計(jì)算，實(shí)現(xiàn)業(yè)務(wù)創(chuàng)新轉(zhuǎn)型。</dd>
</dl>
<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
</div>
</div>
</li>
<li class="yun-solution-item" style="background: url(statics/images/api.jpg) center center no-repeat;">
<div class="yun-solution-item-content">
<div class="yun-solution-text-wrap">
<dl><dt class="yun-solution-title"><em>數(shù)據(jù) API 平臺</em> </dt>
<dd class="yun-solution-des">京東云萬象大數(shù)據(jù)開放平臺是京東云在已有的云計(jì)算平臺基礎(chǔ)上圍繞數(shù)據(jù)提供方、數(shù)據(jù)需求方、數(shù)據(jù)服務(wù)方等多方，構(gòu)建了以數(shù)據(jù)開放、數(shù)據(jù)共享、數(shù)據(jù)分析為核心的綜合性數(shù)據(jù)開放平臺，為全行業(yè)提供權(quán)威數(shù)據(jù)支持，打造全行業(yè)數(shù)據(jù)開放的優(yōu)質(zhì)生態(tài)圈。</dd>
</dl>
<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
</div>
</div>
</li>
</ul>
<a href="javascript:;" class="yunfont yun-btn-more js-btn-more">展開全部</a>
<div class="yun-arrow-wrap yun-arrow-current1" id="yun-arrow-wrap">
<div class="yun-arrow-item"></div>
<div class="yun-arrow-item yun-arrow-triangle"></div>
<div class="yun-arrow-item"></div>
</div>
</div>
<div id="js-sliderBox" class="w yun-solution-list-wrap hidden-xs" style="position: relative;">
<ul class="yun-solution-list" style="width: 1200px; left: 0px; position: absolute;">
<li class="yun-solution-list-item current" data-slider-idx="0" style="width: 150px; height: 77px; float: left;">
<div class="img-wrap" style="background-image: url(statics/images/dsy.png); background-position: 0px 0px;"></div>
<p class="yun-solution-text">電商云
</p>
</li>
<li class="yun-solution-list-item" data-slider-idx="1" style="width: 150px; height: 77px; float: left;">
<div class="img-wrap" style="background-image: url(statics/images/tgy.png); background-position: 0px 0px;"></div>
<p class="yun-solution-text">托管云
</p>
</li>
<li class="yun-solution-list-item" data-slider-idx="2" style="width: 150px; height: 77px; float: left;">
<div class="img-wrap" style="background-image: url(statics/images/sjy.png); background-position: 0px 0px;"></div>
<p class="yun-solution-text">數(shù)據(jù)云
</p>
</li>
<li class="yun-solution-list-item" data-slider-idx="3" style="width: 150px; height: 77px; float: left;">
<div class="img-wrap" style="background-image: url(statics/images/wly.png); background-position: 0px 0px;"></div>
<p class="yun-solution-text">物流云
</p>
</li>
<li class="yun-solution-list-item" data-slider-idx="4" style="width: 150px; height: 77px; float: left;">
<div class="img-wrap" style="background-image: url(statics/images/zny.png); background-position: 0px 0px;"></div>
<p class="yun-solution-text">智能云
</p>
</li>
<li class="yun-solution-list-item" data-slider-idx="5" style="width: 150px; height: 77px; float: left;">
<div class="img-wrap" style="background-image: url(statics/images/cyy.png); background-position: 0px 0px;"></div>
<p class="yun-solution-text">產(chǎn)業(yè)云
</p>
</li>
<li class="yun-solution-list-item" data-slider-idx="6" style="width: 150px; height: 77px; float: left;">
<div class="img-wrap" style="background-image: url(statics/images/jry.png); background-position: 0px 0px;"></div>
<p class="yun-solution-text">金融云
</p>
</li>
<li class="yun-solution-list-item" data-slider-idx="7" style="width: 150px; height: 77px; float: left;">
<div class="img-wrap" style="background-image: url(statics/images/api.png); background-position: 0px 0px;"></div>
<p class="yun-solution-text">數(shù)據(jù) API 平臺
</p>
</li>
</ul>
<a href="javascript:;" class="yun-solution-btn yun-solution-btn-prev yunfont disabled">?</a>
<a href="javascript:;" class="yun-solution-btn yun-solution-btn-next yunfont disabled">?</a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//TAP
$('ul.yun-solution-list li').click(function(){
var index = $(this).index();
$('ul.yun-solution-wrap li').removeClass('current').eq(index).addClass('current');
$('#yun-arrow-wrap').attr('class','yun-arrow-wrap yun-arrow-current'+(index+1));
})
//背景變換
$('ul.yun-solution-list li').hover(function(){
var that =$(this);
var i=0;
bgChange = setInterval(function (){
i+=-84
that.find('div').css('backgroundPositionY',i)
if(i<=-2058){
clearInterval(bgChange);
}
},50)
},function(){
clearInterval(bgChange);
})
})
</script>
jQuery仿京東云系列tab圖標(biāo)導(dǎo)航切換代碼 
