jquery企業(yè)產(chǎn)品服務(wù)列表TAB切換布局

jquery superslide 實(shí)現(xiàn)企業(yè)大數(shù)據(jù)產(chǎn)品服務(wù)列表TAB切換布局代碼，簡(jiǎn)單大氣常用TAB切換布局，鼠標(biāo)懸停列表切換特效。結(jié)構(gòu)簡(jiǎn)單，簡(jiǎn)單易用，下載即可使用。

使用方法：

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="large-content">
	<div class="large-group clearfix">
		<h3 class="large-header">
			<em>大數(shù)據(jù)產(chǎn)品服務(wù)</em>
		</h3>
		<div class="large-switch clearfix">
			<div class="large-switch-circle hd">
				<ul>
					<li class="on">數(shù)據(jù)分析</li>
					<li>數(shù)據(jù)存儲(chǔ)</li>
					<li>數(shù)據(jù)接入</li>
				</ul>
			</div>
			<div class="large-switch-middle bd">
				<ul class="clearfix">
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-001.png" alt="">
						</div>
						<div class="large-item-title">百度MapReduce</div>
						<div class="large-item-text">全托管的Hadoop/Spark計(jì)算集群服務(wù)，助力海量數(shù)據(jù)分析和數(shù)據(jù)挖掘</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-002.png" alt="">
						</div>
						<div class="large-item-title">百度機(jī)器學(xué)習(xí)</div>
						<div class="large-item-text">大規(guī)模機(jī)器學(xué)習(xí)平臺(tái)，提供眾多算法以及行業(yè)模板，助力高級(jí)分析</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-003.png" alt="">
						</div>
						<div class="large-item-title">百度深度學(xué)習(xí)</div>
						<div class="large-item-text">針對(duì)海量數(shù)據(jù)提供的云端托管的分布式深度學(xué)習(xí)平臺(tái)</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-004.png" alt="">
						</div>
						<div class="large-item-title">百度數(shù)據(jù)倉庫 Palo</div>
						<div class="large-item-text">PB級(jí)關(guān)系數(shù)據(jù)分析引擎，為客戶提供穩(wěn)定高效的多維分析服務(wù)</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-005.png" alt="">
						</div>
						<div class="large-item-title">百度Elasticsearch</div>
						<div class="large-item-text">全托管的Hadoop/Spark計(jì)算集群服務(wù)，助力海量數(shù)據(jù)分析和數(shù)據(jù)挖掘</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-006.png" alt="">
						</div>
						<div class="large-item-title">百度日志服務(wù)</div>
						<div class="large-item-text">全托管日志收集投遞服務(wù)，助力從海量日志數(shù)據(jù)中獲取洞察力</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-007.png" alt="">
						</div>
						<div class="large-item-title">百度批量計(jì)算</div>
						<div class="large-item-text">支持海量規(guī)模的并發(fā)作業(yè)，自動(dòng)完成數(shù)據(jù)加載、作業(yè)調(diào)度及資源伸縮</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item-clear">
						<div class="large-switch-dx">敬請(qǐng)期待</div>
					</li>
				</ul>
				<ul class="clearfix">
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-003.png" alt="">
						</div>
						<div class="large-item-title">對(duì)象存儲(chǔ)BOS</div>
						<div class="large-item-text">海量空間、安全、高可靠，支撐了國內(nèi)最大網(wǎng)盤的云存儲(chǔ)</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-004.png" alt="">
						</div>
						<div class="large-item-title">百度消息服務(wù)</div>
						<div class="large-item-text">全托管Kafka服務(wù)，高可擴(kuò)展高通量的消息集成托管服務(wù)</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-005.png" alt="">
						</div>
						<div class="large-item-title">關(guān)系型數(shù)據(jù)庫RDS</div>
						<div class="large-item-text">支持MySQL、SQL Server、PostgreSQL，可靠易用、免維護(hù)</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-006.png" alt="">
						</div>
						<div class="large-item-title">簡(jiǎn)單緩存服務(wù)SCS</div>
						<div class="large-item-text">提供高性能、高可用的分布式緩存服務(wù)，兼容Memcache/Redis協(xié)議</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item-clear">
						<div class="large-switch-dx">敬請(qǐng)期待</div>
					</li>
				</ul>
				<ul class="clearfix">
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-003.png" alt="">
						</div>
						<div class="large-item-title">百度日志服務(wù)</div>
						<div class="large-item-text">全托管日志收集投遞服務(wù)，助力從海量日志數(shù)據(jù)中獲取洞察力</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item">
						<div class="large-item-img">
							<img src="images/pic-005.png" alt="">
						</div>
						<div class="large-item-title">物接入</div>
						<div class="large-item-text">快速建立設(shè)備與云端雙向連接的、全托管的云服務(wù)</div>
						<a href="#" class="large-item-link">查看詳情</a>
					</li>
					<li class="large-switch-item-clear">
						<div class="large-switch-dx">敬請(qǐng)期待</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	jQuery(".large-switch").slide({
		autoPlay: false,
		trigger: "click",
		delayTime: 1000
	});
</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)。

查看演示下載資源

0 12699 164

軟件 Dreamweaver
格式 HTML
作者歪秀
版權(quán) ? 原創(chuàng)商用（獨(dú)家） i

版權(quán)聲明

此作品是由17素材網(wǎng)簽約用戶上傳，17素材網(wǎng)擁有版權(quán)；未經(jīng)17素材網(wǎng)書面授權(quán)，請(qǐng)勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權(quán)；

17素材網(wǎng)尊重知識(shí)產(chǎn)權(quán)，如知識(shí)產(chǎn)權(quán)權(quán)利人認(rèn)為平臺(tái)內(nèi)容涉嫌侵權(quán)，可通過郵件：3264130392@qq.com提出書面通知，我們將及時(shí)處理。

網(wǎng)站提供的黨政主題相關(guān)內(nèi)容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個(gè)人學(xué)習(xí)分享使用，禁止用于任何廣告和商用目的。