QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jquery云服务列表tab切换选项卡代码

原创商用 jquery云服务列表tab切换选项卡代码

jquery 实现TAB切换及动态效果切换企业建站云服务专家介绍, js css 分离,结构清晰简单, 上下结构 俩个效果,一个是按照毫秒添加时间自动滑动, 第二个效果,是常用TAB切换效果,jquery 均有注释,参数可修改,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

3、body引入HTML代码

<div class="aui-main">
	<div class="aui-section-box">
		<div class="aui-section-header">
			<p class="aui-section-header-title">全智能云服务专家</p>
			<p class="aui-summary">
				深度融合
				<a href="#">在线客服</a>
				<span class="aui-summary-tag">、</span>
				<a href="#">客服机器人</a>
				<span class="aui-summary-tag">、</span>
				<a href="#">呼叫中心</a>
				<span class="aui-summary-tag">、</span>
				<a href="#">工单系统</a>
				<span class="aui-summary-tag">、</span>
				<a href="#">营销服务</a>
				,智能驱动每一个服务环节
			
			</p>
		</div>
		<div class="aui-section-body i-process">
			<ul class="aui-section-list">
				<li class="btn aui-section-list-item aui-section-list-item one">
					<img class="obj" src="./images/icon001.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
				<li class="btn aui-section-list-item two">
					<img class="obj" src="./images/icon002.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
				<li class="btn aui-section-list-item three">
					<img class="obj" src="./images/icon003.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
				<li class="btn aui-section-list-item four">
					<img class="obj" src="./images/icon004.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
				<li class="btn aui-section-list-item five">
					<img class="obj" src="./images/icon005.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
				<li class="btn aui-section-list-item six">
					<img class="obj" src="./images/icon006.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
			</ul>
		</div>
		<div class="aui-section-tab">
			<div class="hd aui-section-list">
				<ul>
					<li class="on">全渠道接入</li>
					<li>智能机器人</li>
					<li>客户服务</li>
					<li>用户行为洞察</li>
					<li>智能营销</li>
					<li>统一管理分析</li>
				</ul>
			</div>
			<div class="bd aui-section-info">
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item001.png" alt="">
								</div>
								<div class="icon-main">
									<p class="icon-title">移动App</p>
									<p class="icon-text">iOS、Android</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item002.png" alt="">
								</div>
								<div class="icon-main">
									<p class="icon-title">网页咨询</p>
									<p class="icon-text">Web、Wap、H5</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item003.png" alt="">
								</div>
								<div class="icon-main">
									<p class="icon-title">微信</p>
									<p class="icon-text">公众号及小程序</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item004.png" alt="">
								</div>
								<div class="icon-main">
									<p class="icon-title">呼叫中心</p>
									<p class="icon-text">手机、电话</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item005.png" alt="">
								</div>
								<div class="icon-main">
									<p class="icon-title">自定义消息接口</p>
									<p class="icon-text">按企业需求接管消息</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item006.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">服务先知</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item007.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">服务先知</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item008.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">服务先知</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item009.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">智能分流</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item010.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">人机协作</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item011.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">语音识别</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item012.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">CRM对接</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item013.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">工单流转</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item015.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">访问统计</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item016.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">访问轨迹</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item017.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">访问名片</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item018.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">用户画像</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item019.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">关键环节营销</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item020.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">主动发起会话</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item021.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">客服管理</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item022.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">客户管理</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item023.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">数据分析</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">

	jQuery(".aui-section-tab").slide({
		effect: "fade",
		autoPlay: true,
		trigger: "mouseover",
		delayTime: 500
	});

	$(function() {

		$(".i-process .btn").eq(0).addClass("cur")

		var LightNum = 0
			, LightAuto = setInterval(function() {

			LightNum++;

			if (LightNum == $(".i-process .btn").length) {

				LightNum = 0

			}

			$(".i-process .btn").eq(LightNum).addClass("cur").siblings().removeClass("cur")

		}, 2500);

	});
	$(function() {

		$('.banner-contorl li').on('click', function() {

			var index = $(this).index();

			change(index, 'ctrl');

		});

	});

</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

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

知道了
亚洲28 www.1828.com-依彩化妆品价格查询| www.34vv.com-七星彩两期一样好| www.1308.pw-福彩3d图纸总汇| www.207291.com-彩票快3辅助软件| www.371342.com-红旗彩票北京快三| www.859185.com-728彩票网页| www.276015.com-开门彩专家杀号| www.5fr.com-刘军玩彩厉害吗| www.i74.net-竞彩触屏-| www.5829.biz-澳门快三算法| www.791386.com-中国福彩数字3开奖| www.903422.com-万豪彩票助手旧版| 华夏彩票www.hx1164.com| www.887535.cc-2044彩票网址| www.6085.top-福彩黑心-| www.52913.com-彩票站干黑彩| www.cp870.com-吉林快三下注平台| www.966587.com-久久发彩票下载安装| www.fh22.com-彩票亿元大奖排行榜| www.36lr.com-全民彩票官网首页| www.569984.com-博彩广告怎么样| www.689056.com-专业玩彩网站| www.867569.com-快三分析大师| www.985940.com-乐彩走势图表| www.36yv.com-七星彩是真是假| www.591609.com-永利彩票靠谱吗| www.508798.com-gpk彩票-| www.964707.com-中彩网双色球打擂台| www.q97.cn-彩票百位振幅走势图| www.0502.org-昨天体彩体彩开奖号| www.8833.bid-爱乐透彩票开奖结果| www.66445.com-彩票支票多久到账| www.944429.com-乐发彩票app| 大赢家彩票平台www.371956.com| www.88qk.com-彩票粉怎么用| www.752320.com-时时中彩票电脑版| www.303203.com-彩虹5无人机| www.390.in-大发快三大小推算| www.109029.com-彩票平台余额修改| www.369413.com-全民彩票916| www.637106.com-彩虹六号透视辅助| www.365643.cc-足彩竞彩新浪500| www.8241.top-万博彩票下载| www.42ik.com-收米竞彩软件| www.800209.com-中国体彩500| www.915965.com-彩票店可以兼营什么| www.ad32.com-彩票开奖助手| www.20hb.com-新浪胜负彩对阵表| www.4424.net-彩视app-| www.1812.in-沃尔玛福彩图案| www.209398.com-app人人中彩票| www.651291.com-水彩大师阿尔瓦罗| www.34167.com-500彩票时时彩| www.232296.com-甘肃快三玩法与奖金| www.531156.com-彩铅手绘图片简单| www.76il.com-新加坡金都快三查询| www.8330.top-七星彩心灵码仙视频| www.37722.com-彩虫官方下载| www.839294.com-彩票足球开奖查询彩| www.966097.com-发彩网登录-| 500彩票网www.903079.com| www.579039.com-360福彩3d杀号| www.951574.com-红彩网络直播| 福彩www.16878q.com| www.920955.com-北京福彩网快三| www.996470.com-黑龙江福彩票| www.ge25.com-快三玩家-| www.196900.com-预知快三软件| www.792078.com-德州快三提前预知| www.893728.com-恒彩手机客户端下载| www.964980.com-快三怎么用胆码计算| www.cp2121.com-分分时时彩技巧| www.017901.com-广西体彩领奖| www.39761.cc-706彩票安卓版| www.52146.com-足彩竞猜计算器通关| www.011694.com-福彩中心放假吗| www.088617.com-彩吧彩票单双大小| www.169338.com-百姓彩票-| www.136689.com-大同福彩中心电话| www.812078.com-乐彩论坛彩票预测| www.923883.com-骰子彩票-| www.978899.com-苏式彩画图片| www.fx28.com-彩票托怎么挣钱| www.g34.cc-彩票新规则-| www.52634.com-看彩票开奖结果| www.053837.com-安徽快三手机app| www.2481.shop-湖北体育彩票大乐透| www.385853.com-买彩票段子-| www.567232.com-香港即时彩开彩| www.365518.cc-什么是即开型彩票| www.6ly.cc-数学家能算出彩票吗| www.662.tv-开黑彩网站犯法吗| www.78166.cc-广西快三高手计划群| www.053120.com-95彩提不了现| www.21vh.com-竞彩误差是什么意思| www.254892.com-彩票开奖结果梦册| www.35089.com-彩票平刷软件手机版| www.206357.com-宝利彩票app下载| www.55233.com-体彩大乐透直播现场| www.776455.com-购彩汪官方大乐透| www.0342.loan-手机购买彩票摇一摇| www.619902.com-奇门测祘彩票| www.6111.pw-世界彩票种类| www.12309.cc-萬發国际彩票| www.195708.com-吉林快三组选分布图| www.368111.com-彩芽的好奇心动漫| www.73199.com-易彩完美修复补漆| www.23vr.com-牛彩网彩票网站| www.550221.com-778彩票官方网站| www.29956.com-下载全民竟彩彩票| www.562069.com-鸿彩主播小雪| www.213192.com-河北快三走势图在线| www.05884.com-喜盈门彩票软件下载| www.64433.cc-皇冠足彩跟单软件| www.064414.com-老时时彩360彩票| www.454444.com-一分时时彩人工计划| www.548009.com-竞彩推荐行业赚钱| www.206124.com-五分时时彩最新骗局| www.300593.com-彩票现金网-| www.364638.com-五亿彩票官方网站| www.15uk.com-河南体彩超级大乐透| www.490283.com-今天7乐彩开奖公告| www.111655.com-淘彩app是干啥的| www.178509.com-内蒙快三跨度走势图| www.275344.com-今日头条彩票大师| www.353253.com-舍彩女装旗舰店| www.399660.com-新乡2019彩票| www.482322.com-一般买彩票是几位数| www.948186.com-众彩网双色专家汇总| 豪彩VIPwww.001857.com| www.98ut.com-竞彩足球身价对比| www.x58.club-乐彩商城-| www.957214.com-山西快乐十分派彩网| www.212796.com-必赢彩票提不出钱来| www.953658.cc-计算器足球竞彩网| www.876660.com-上海彩票基诺| www.132429.com-濮阳市彩礼-| www.935292.com-彩票软件苹果版| www.978808.com-美国好彩烟代购| 500彩票www.500231.com| www.ev85.com-九州中彩票app| www.sg46.com-5oo彩票网3-| www.u14.com-深圳福彩投诉| www.8502.cc-k彩怎么进不去了| www.801088.com-福利彩票快三1月2| www.912111.cc-福彩公益金使用范围| www.ah65.com-搜狐体彩福彩网| www.n66.top-如何能买彩票中奖| www.88bq.com-彩之网双色球开奖| www.3084.cn-七星彩+开奖| www.169444.com-大发快三玩法| www.036608.com-老彩民app靠谱吗| www.012385.com-福利彩票网购| www.517747.com-中原福彩22-| www.697617.com-彩票资料免费之大全| www.385089.com-彩票几点开奖时间| www.488130.com-七乐彩三加一有钱么| www.553447.com-足彩二串一技巧| www.92ep.com-五分钟快三-| www.062648.com-鸿运彩票手机app| www.152563.com-福彩揭秘-| www.76gf.com-七乐彩哪里兑奖| www.94217.com-公益体彩责任为先| www.104706.com-牛牛彩票官网|