QQ客服
当前位置 : 上海时时乐开奖彩经 > 代码 > 网页特效 > 选项卡/滑动门 > jquery企业产品服务列表TAB切换布局

上海时时乐开: VIP商用 jquery企业产品服务列表TAB切换布局

jquery superslide 实现企业大数据产品服务列表TAB切换布局代码,简单大气常用TAB切换布局,鼠标悬停列表切换特效。结构简单,简单易用,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

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>大数据产品服务</em>
		</h3>
		<div class="large-switch clearfix">
			<div class="large-switch-circle hd">
				<ul>
					<li class="on">数据分析</li>
					<li>数据存储</li>
					<li>数据接入</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计算集群服务,助力海量数据分析和数据挖掘</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">百度机器学习</div>
						<div class="large-item-text">大规?;餮捌教?,提供众多算法以及行业模板,助力高级分析</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">百度深度学习</div>
						<div class="large-item-text">针对海量数据提供的云端托管的分布式深度学习平台</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">百度数据仓库 Palo</div>
						<div class="large-item-text">PB级关系数据分析引擎,为客户提供稳定高效的多维分析服务</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计算集群服务,助力海量数据分析和数据挖掘</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">百度日志服务</div>
						<div class="large-item-text">全托管日志收集投递服务,助力从海量日志数据中获取洞察力</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">百度批量计算</div>
						<div class="large-item-text">支持海量规模的并发作业,自动完成数据加载、作业调度及资源伸缩</div>
						<a href="#" class="large-item-link">查看详情</a>
					</li>
					<li class="large-switch-item-clear">
						<div class="large-switch-dx">敬请期待</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">对象存储BOS</div>
						<div class="large-item-text">海量空间、安全、高可靠,支撑了国内最大网盘的云存储</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">百度消息服务</div>
						<div class="large-item-text">全托管Kafka服务,高可扩展高通量的消息集成托管服务</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">关系型数据库RDS</div>
						<div class="large-item-text">支持MySQL、SQL Server、PostgreSQL,可靠易用、免维护</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">简单缓存服务SCS</div>
						<div class="large-item-text">提供高性能、高可用的分布式缓存服务,兼容Memcache/Redis协议</div>
						<a href="#" class="large-item-link">查看详情</a>
					</li>
					<li class="large-switch-item-clear">
						<div class="large-switch-dx">敬请期待</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">百度日志服务</div>
						<div class="large-item-text">全托管日志收集投递服务,助力从海量日志数据中获取洞察力</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">快速建立设备与云端双向连接的、全托管的云服务</div>
						<a href="#" class="large-item-link">查看详情</a>
					</li>
					<li class="large-switch-item-clear">
						<div class="large-switch-dx">敬请期待</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	jQuery(".large-switch").slide({
		autoPlay: false,
		trigger: "click",
		delayTime: 1000
	});
</script> 
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 上海时时乐开奖彩经

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了