QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 選項卡/滑動門 > jQuery企業商標圖片tab布局代碼

3d万能8码分布图: VIP商用 jQuery企業商標圖片tab布局代碼

jQuery制作合作客戶企業商標圖片網格布局,帶箭頭翻頁控制。合作客戶,客戶心聲tab布局切換效果代碼。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權?;?,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

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>風雨同行·共同成長</h2>
		<p>現在,服務的上千家客戶與我們一路同行,見證我們的成長;未來,我們一起分享成功的喜悅。</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年有經驗">
						</li>
						<li>
							<div class="imgs"><img src="statics/images/i_img2.jpg" alt="光大環保"></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="香港中文大學"></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年有態度">
						</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="中國商務航空"></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="光大環保" src="statics/images/i_img3.jpg">
					<p><strong>光大環保</strong><br>我是光大環保項目部范總,不謙虛的說,光大環保項目外包很多多,但是光大環保在選擇了和易百訊合作后在制作過程還有客服服務中,非常的滿意!易百訊能夠根據我們的基礎要求進行邏輯思維拓展,能夠使我們的初步想法轉化為實際的設計效果,使我們的用戶體驗達到更加完美的效果,這次和易百訊合作,光大非常滿意,也希望在未來,能夠和易百訊就網站建設領域進行更深層次的合作,共同促進網站建設行業健康蓬勃的發展!</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>我是安托山技術部余總,10多億元人民幣建造的安托山沙井高科技工業園,占地28萬平方米, 總建筑面積86萬平方米,在公司網站建設中,經過層層篩選,我們選擇易百訊為我們提供網站建設服務,而在以后合作的日子里,我們深刻的感受到了易百訊人的敬業!7*24小時的售后服務,讓我們隨時能夠找到售后客服,建站后期易百訊也會及時的巡護網站,一旦發現網站有漏洞,也會及時的提出并幫我們解決,這種主動熱情的售后服務使我們看到了一個企業真正的文化和內涵,我們也明白選擇易百訊我們沒有選擇錯!</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>我是方正網絡技術總監陳文磊,不可否認,易百訊是一個很朝氣蓬勃的團隊,也是一個很積極向上的團隊,每一次溝通合作,總能給我們帶來新的東西,有時候我們不僅僅在網站建設方面進行合作,還常常就我們的品牌策略進行深入的洽談,他們能將我們想要的東西甚至我們還沒考慮到的細節展示在我們的網站中,為我們的品牌形象做出更精準的闡釋。再次我也希望,我們方正應該學習易百訊的團隊精神!</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>我是華潤科技部經理田文軍,這已經是我們華潤第四次和易百訊合作了,與前三次一樣依然合作的很開心。與易百訊合作讓我放心的是易百訊的設計、服務和專業性。現在深圳有很多號稱可以做個性化網站定制的公司,但太多設計非常一般、服務不好,且魚龍混雜,一不小心就會被騙,還有可能中途合作不下去。很多公司也都僅僅只能做網站建設服務,無法從專業上給予我們建設性的意見,這是很多公司都無法辦到的,但易百訊做到了。無論在設計、服務上還是專業性上,易百訊讓我都很放心,愿易百訊再接再厲,為企業提供更多更優質服務。</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)
	}
	
	//合作客戶翻頁調用
	$(".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>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了