微信掃碼登錄 ×
vip素材 jQuery企業(yè)商標(biāo)圖片tab布局代碼
vip素材

jQuery企業(yè)商標(biāo)圖片tab布局代碼

收藏
jQuery企業(yè)商標(biāo)圖片tab布局代碼
jQuery制作合作客戶(hù)企業(yè)商標(biāo)圖片網(wǎng)格布局，帶箭頭翻頁(yè)控制。合作客戶(hù)，客戶(hù)心聲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)雨同行·共同成長(zhǎng)</h2>
		<p>現(xiàn)在，服務(wù)的上千家客戶(hù)與我們一路同行，見(jiàn)證我們的成長(zhǎng)；未來(lái)，我們一起分享成功的喜悅。</p>
	</div>
	<div class="customer_top">
		<a href="javascript:;" class="two_sel" id="solutiont1" onMouseOver="hoverlia4('solutiont', 'solutiondiv', 1, 2,'two_sel')">合作客戶(hù)</a>
		<a href="javascript:;" id="solutiont2" onMouseOver="hoverlia4('solutiont', 'solutiondiv', 2, 2,'two_sel')">客戶(hù)心聲</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)驗(yàn)">
						</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="華潤(rùn)"></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="和詩(shī)"></div>
						</li>
						<li>
							<div class="imgs"><img src="statics/images/i_img2_12.jpg" alt="簡(jiǎn)寧安"></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="普樂(lè)坊"></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="壹進(jìn)制"></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="中國(guó)商務(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)保項(xiàng)目部范總，不謙虛的說(shuō)，光大環(huán)保項(xiàng)目外包很多多，但是光大環(huán)保在選擇了和易百訊合作后在制作過(guò)程還有客服服務(wù)中，非常的滿意！易百訊能夠根據(jù)我們的基礎(chǔ)要求進(jìn)行邏輯思維拓展，能夠使我們的初步想法轉(zhuǎn)化為實(shí)際的設(shè)計(jì)效果，使我們的用戶(hù)體驗(yàn)達(dá)到更加完美的效果，這次和易百訊合作，光大非常滿意，也希望在未來(lái)，能夠和易百訊就網(wǎng)站建設(shè)領(lǐng)域進(jìn)行更深層次的合作，共同促進(jìn)網(wǎng)站建設(shè)行業(yè)健康蓬勃的發(fā)展！</p>
					<div class="bg"><u></u></div>
				</li>

				<li>
					<div class="shade"><u></u></div><img alt="安托山集團(tuán)" src="statics/images/solution_img2.jpg">
					<p><strong>安托山</strong><br>我是安托山技術(shù)部余總，10多億元人民幣建造的安托山沙井高科技工業(yè)園，占地28萬(wàn)平方米, 總建筑面積86萬(wàn)平方米，在公司網(wǎng)站建設(shè)中，經(jīng)過(guò)層層篩選，我們選擇易百訊為我們提供網(wǎng)站建設(shè)服務(wù)，而在以后合作的日子里，我們深刻的感受到了易百訊人的敬業(yè)！7*24小時(shí)的售后服務(wù)，讓我們隨時(shí)能夠找到售后客服，建站后期易百訊也會(huì)及時(shí)的巡護(hù)網(wǎng)站，一旦發(fā)現(xiàn)網(wǎng)站有漏洞，也會(huì)及時(shí)的提出并幫我們解決，這種主動(dòng)熱情的售后服務(wù)使我們看到了一個(gè)企業(yè)真正的文化和內(nèi)涵，我們也明白選擇易百訊我們沒(méi)有選擇錯(cuò)！</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)陳文磊，不可否認(rèn)，易百訊是一個(gè)很朝氣蓬勃的團(tuán)隊(duì)，也是一個(gè)很積極向上的團(tuán)隊(duì)，每一次溝通合作，總能給我們帶來(lái)新的東西，有時(shí)候我們不僅僅在網(wǎng)站建設(shè)方面進(jìn)行合作，還常常就我們的品牌策略進(jìn)行深入的洽談，他們能將我們想要的東西甚至我們還沒(méi)考慮到的細(xì)節(jié)展示在我們的網(wǎng)站中，為我們的品牌形象做出更精準(zhǔn)的闡釋。再次我也希望，我們方正應(yīng)該學(xué)習(xí)易百訊的團(tuán)隊(duì)精神！</p>
					<div class="bg"><u></u></div>
				</li>

				<li>
					<div class="shade"><u></u></div><img alt="華潤(rùn)科技" src="statics/images/solution_img4.jpg">
					<p><strong>華潤(rùn)科技</strong><br>我是華潤(rùn)科技部經(jīng)理田文軍，這已經(jīng)是我們?nèi)A潤(rùn)第四次和易百訊合作了，與前三次一樣依然合作的很開(kāi)心。與易百訊合作讓我放心的是易百訊的設(shè)計(jì)、服務(wù)和專(zhuān)業(yè)性?，F(xiàn)在深圳有很多號(hào)稱(chēng)可以做個(gè)性化網(wǎng)站定制的公司，但太多設(shè)計(jì)非常一般、服務(wù)不好，且魚(yú)龍混雜，一不小心就會(huì)被騙，還有可能中途合作不下去。很多公司也都僅僅只能做網(wǎng)站建設(shè)服務(wù)，無(wú)法從專(zhuān)業(yè)上給予我們建設(shè)性的意見(jiàn)，這是很多公司都無(wú)法辦到的，但易百訊做到了。無(wú)論在設(shè)計(jì)、服務(wù)上還是專(zhuān)業(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)
	}
	
	//合作客戶(hù)翻頁(yè)調(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>

使用聲明

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

  • 軟件 Dreamweaver
  • 格式 HTML
  • 作者 迷茫
x
×
×

注冊(cè)

QQ注冊(cè) 立即下載 微信注冊(cè) 立即下載

簽到成功!

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

知道了