jQuery制作合作客戶企業(yè)商標(biāo)圖片網(wǎng)格布局,帶箭頭翻頁控制。合作客戶,客戶心聲tab布局切換效果代碼。
使用方法:
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="customer">
<div class="customer_t">
<h2>風(fēng)雨同行·共同成長</h2>
<p>現(xiàn)在,服務(wù)的上千家客戶與我們一路同行,見證我們的成長;未來,我們一起分享成功的喜悅。</p>
</div>
<div class="customer_top">
<a href="javascript:;" class="two_sel" id="solutiont1" onMouseOver="hoverlia4('solutiont', 'solutiondiv', 1, 2,'two_sel')">合作客戶</a>
<a href="javascript:;" id="solutiont2" onMouseOver="hoverlia4('solutiont', 'solutiondiv', 2, 2,'two_sel')">客戶心聲</a>
</div>
<div id="solutiondiv1">
<div class="customer_list w1440 anim anim-2 anim-show">
<div class="customer_items">
<div class="item" style="display: block;">
<ul>
<li>
<img src="statics/images/i_img1.jpg" class="imgbg" alt="10年有經(jīng)驗">
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2.jpg" alt="光大環(huán)保"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_6.jpg" alt="南深股份"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_2.jpg" alt="大族激光"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_3.jpg" alt="華潤"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_4.jpg" alt="暢捷通"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_5.jpg" alt="康美"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_1.jpg" alt="安托山"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_7.jpg" alt="香港中文大學(xué)"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_8.jpg" alt="邁瑞"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_9.jpg" alt="博覽亞太"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_10.jpg" alt="鼎頌"></div>
</li>
</ul>
</div>
<div class="item" style="display: none;">
<ul>
<li>
<img src="statics/images/i_img1.jpg" class="imgbg" alt="10年有態(tài)度">
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_11.jpg" alt="和詩"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_12.jpg" alt="簡寧安"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_13.jpg" alt="柯麗爾"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_14.jpg" alt="米希蘭"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_15.jpg" alt="普樂坊"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_16.jpg" alt="普羅米修"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_17.jpg" alt="莎米特"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_18.jpg" alt="壹進制"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_19.jpg" alt="怡太積"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_20.jpg" alt="易普森"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_21.jpg" alt="中國商務(wù)航空"></div>
</li>
</ul>
</div>
</div>
<div class="customer-buttons">
<div class="owl-prev disabled">prev</div>
<div class="owl-next ">next</div>
</div>
</div>
</div>
<div id="solutiondiv2" class="divhidden">
<div class="solution_ul2 w1440 anim anim-2 anim-show">
<ul>
<li>
<div class="shade"><u></u></div><img alt="光大環(huán)保" src="statics/images/i_img3.jpg">
<p><strong>光大環(huán)保</strong><br>我是光大環(huán)保項目部范總,不謙虛的說,光大環(huán)保項目外包很多多,但是光大環(huán)保在選擇了和易百訊合作后在制作過程還有客服服務(wù)中,非常的滿意!易百訊能夠根據(jù)我們的基礎(chǔ)要求進行邏輯思維拓展,能夠使我們的初步想法轉(zhuǎn)化為實際的設(shè)計效果,使我們的用戶體驗達到更加完美的效果,這次和易百訊合作,光大非常滿意,也希望在未來,能夠和易百訊就網(wǎng)站建設(shè)領(lǐng)域進行更深層次的合作,共同促進網(wǎng)站建設(shè)行業(yè)健康蓬勃的發(fā)展!</p>
<div class="bg"><u></u></div>
</li>
<li>
<div class="shade"><u></u></div><img alt="安托山集團" src="statics/images/solution_img2.jpg">
<p><strong>安托山</strong><br>我是安托山技術(shù)部余總,10多億元人民幣建造的安托山沙井高科技工業(yè)園,占地28萬平方米, 總建筑面積86萬平方米,在公司網(wǎng)站建設(shè)中,經(jīng)過層層篩選,我們選擇易百訊為我們提供網(wǎng)站建設(shè)服務(wù),而在以后合作的日子里,我們深刻的感受到了易百訊人的敬業(yè)!7*24小時的售后服務(wù),讓我們隨時能夠找到售后客服,建站后期易百訊也會及時的巡護網(wǎng)站,一旦發(fā)現(xiàn)網(wǎng)站有漏洞,也會及時的提出并幫我們解決,這種主動熱情的售后服務(wù)使我們看到了一個企業(yè)真正的文化和內(nèi)涵,我們也明白選擇易百訊我們沒有選擇錯!</p>
<div class="bg"><u></u></div>
</li>
<li>
<div class="shade"><u></u></div><img alt="北大方正" src="statics/images/solution_img3.jpg">
<p><strong>北大方正</strong><br>我是方正網(wǎng)絡(luò)技術(shù)總監(jiān)陳文磊,不可否認,易百訊是一個很朝氣蓬勃的團隊,也是一個很積極向上的團隊,每一次溝通合作,總能給我們帶來新的東西,有時候我們不僅僅在網(wǎng)站建設(shè)方面進行合作,還常常就我們的品牌策略進行深入的洽談,他們能將我們想要的東西甚至我們還沒考慮到的細節(jié)展示在我們的網(wǎng)站中,為我們的品牌形象做出更精準(zhǔn)的闡釋。再次我也希望,我們方正應(yīng)該學(xué)習(xí)易百訊的團隊精神!</p>
<div class="bg"><u></u></div>
</li>
<li>
<div class="shade"><u></u></div><img alt="華潤科技" src="statics/images/solution_img4.jpg">
<p><strong>華潤科技</strong><br>我是華潤科技部經(jīng)理田文軍,這已經(jīng)是我們?nèi)A潤第四次和易百訊合作了,與前三次一樣依然合作的很開心。與易百訊合作讓我放心的是易百訊的設(shè)計、服務(wù)和專業(yè)性?,F(xiàn)在深圳有很多號稱可以做個性化網(wǎng)站定制的公司,但太多設(shè)計非常一般、服務(wù)不好,且魚龍混雜,一不小心就會被騙,還有可能中途合作不下去。很多公司也都僅僅只能做網(wǎng)站建設(shè)服務(wù),無法從專業(yè)上給予我們建設(shè)性的意見,這是很多公司都無法辦到的,但易百訊做到了。無論在設(shè)計、服務(wù)上還是專業(yè)性上,易百訊讓我都很放心,愿易百訊再接再厲,為企業(yè)提供更多更優(yōu)質(zhì)服務(wù)。</p>
<div class="bg"><u></u></div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
//js tab功能
function g(o) {
return document.getElementById(o);
}
function hoverlia4(t_n, t_n2, n, k, className) {
for(var i = 1; i <= k; i++) {
g(t_n2 + i).className = 'divhidden';
g(t_n + i).className = '';
$("#" + t_n2 + i).find(".anim").removeClass("anim-show");
}
g(t_n2 + n).className = '';
g(t_n + n).className = className;
setTimeout(function() {
$("#" + t_n2 + n).find(".anim").addClass("anim-show");
}, 6)
}
//合作客戶翻頁調(diào)用
$(".customer-buttons div").click(function() {
var linum = $(this).index();
var CaseList = $(".customer_items .item");
$(this).addClass('disabled').siblings().removeClass('disabled');
CaseList.eq(linum).show().siblings().hide();
});
</script>