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天

知道了
购彩堂 www.251898.com-彩票12注册-| www.65xc.com-彩票初学者该怎么买| www.4326.cn-鑫彩网站安全吗| www.01380.com-平台送彩金-| www.659413.com-七星乐彩开奖号码| www.300036.com-七天彩网站-| www.80998.com-中彩堂-| www.13oc.com-五分⑥和彩五不中| www.1641.vip-澳洲三分彩全天计划| www.206405.com-彩票预测计划| www.383311.com-天津体彩下载软件| www.rf77.com-贵州快三预测号码| www.93fj.com-数字彩票的奥妙| www.290955.com-福彩500期-| www.31813.com-胜负彩任九开奖数据| www.620087.com-彩礼新规定2019| www.015938.com-唯彩会老版-| www.906779.com-好彩app官方| 易彩网www.36166n.com| www.13233.cc-竞彩投注比例查询| www.724201.com-微彩属于赌博| www.588054.com-彩票独胆-| www.096800.com-源众彩网-| www.540073.com-3d新浪数字彩票| www.625571.com-9福彩票官网| www.725647.com-彩票精准分析器| www.818444.cc-新浪网彩票首页| www.888538.com-95彩下载-| www.971570.com-彩票网yc955| www.qw7.com-彩票口诀大全图片| www.zv93.com-体彩店与竞彩店区别| www.034550.com-大盛游戏彩票网站| www.01490.com-斗牛送彩金-| www.194068.com-体彩天津11选5| www.340205.com-玩吉彩彩票规律| www.17sf.com-足球彩票提成是多少| www.40185.com-体彩竟彩足球规则| www.674467.com-足彩销量查询| www.3973.net-天天乐时时彩平台| www.237048.com-竞彩足球奖金计算器| www.935365.com-澳洲时时彩是私彩吗| www.ko35.com-一分钟一开的时时彩| www.752.me-重庆时时彩和值大小| www.477003.com-时时彩福少做号软件| www.94750.com-七乐彩选号定胆公式| www.216887.com-22彩票ios版| www.596165.com-3d彩票报纸-| www.066921.com-3d福彩杀号-| www.349332.com-3d福彩乐彩网首页| www.439886.com-怎么注册时时彩账号| www.535755.com-今日出奖七星彩票| www.607899.com-彩票生意怎么样| www.sc35.com-三d福彩千禧开机号| www.43399.com-民彩网76658| www.72898.com-长沙市福利彩票中心| www.2683.me-彩票停卖时间| www.200093.cc-六i和彩今晚开奖结| www.590086.com-福彩3d字迷图迷| www.a35.org-广西快三单双预测| www.999778.cc-天冠彩票是否正规| www.318633.com-大发快三算法| www.45421.com-重庆彩票新闻| www.367977.com-七彩星小说| www.749177.com-彩虹100-| www.x85.me-彩8娱乐-| www.b93.cc-宁夏快三49期开奖| www.379999.com-益彩宝钞吉祥号| www.996758.com-福彩黑龙江网| www.657372.com-彩库宝典2019版| www.964189.com-15选5彩乐乐| www.67rz.com-熊猫彩浜-| www.450010.com-七星彩网上投注代理| www.775829.com-邯郸体彩中心| www.217744.com-福彩网app-| www.5789.net-全国即开彩收藏| www.993816.com-玩彩票大平台ios| www.47044.com-足彩十四场新浪爱彩| www.64cx.com-足彩加vip邀请码| www.779025.com-福彩3d大花猫二| www.952707.com-九州彩票时时彩| www.ru21.cc-破解彩票平台网站| www.786533.com-全民福彩网站网址| www.877286.com-刮刮乐彩票中奖技巧| www.960509.com-山东彩票中奖展示| www.bg55.com-电竞博彩app| www.ma06.com-11选5爱乐彩推荐| www.492790.com-快乐彩输了2000| 天天中www.77ttz.com| www.326837.com-博皇走势预测快三| www.167632.com-福彩3d走势图| www.765232.com-足球彩票怎么买不了| www.884554.com-彩吧网排列三试机号| www.972056.com-福彩被破解-| www.791794.com-全民汇彩票秘诀| www.943517.com-重庆时时彩登录| www.i40.top-福彩体彩开奖公告| www.535.com-移动和彩云-| www.pm19.com-广西快三一定牛走势| www.59352.com-天津时时彩彩经网| www.192562.com-推荐几个彩票app| www.139971.cc-贵州彩票17中奖| www.74435.com-彩票app验证码| www.22249.cc-天天彩票官网首页| www.12831.cc-爱投彩票吧-| www.hq61.cc-上海快三死规律| www.134012.cc-安微快三一定牛| www.35782.com-极云彩票销售系统| www.630380.com-福彩3d彩宝下载| www.085987.com-彩票传销骗局揭秘| www.202395.com-重庆贵族快三多少期| www.213232.com-彩经网河北快三| www.299013.com-彩29软件下载| www.362502.com-福彩红五图库永久域| www.986292.com-篮彩比分直播球探| www.be10.com-兼职刷彩票赚佣金| www.rk49.com-湖北彩3d-| www.8643.live-春秋彩票黑平台| www.5388.live-彩票软件网站好不好| www.185758.com-老时时彩360| www.233767.com-彩票容错缩水技巧| www.172923.com-贵州福彩双色球| www.444367.com-彩16在线-| www.568132.com-怎样用彩票赚钱| www.29il.com-体彩投注软件山东| www.802658.com-彩界精英独胆双胆| www.984311.com-广州鸣彩联系方式| www.vl4.com-马来西亚乐和彩合图| www.121873.com-找微信彩票群| www.420080.com-中国体彩刮刮乐| www.45035.com-青海体彩十一选五| www.984315.com-外国时时彩彩票网站| www.qv6.com-今天上海快三开结果| www.675080.com-快彩网官方直营| www.296646.com-江苏e球彩规则| www.093585.com-乐选3中奖规则体彩| www.7027.vip-篮球彩票中奖怎么看| www.yh76.cc-手机淘宝怎么买彩票| www.55zp.com-彩票如何领奖| www.920650.com-福建快三一天多少期| www.985314.com-728彩票安卓| www.br21.com-幸运快三能赢钱么| www.vz07.com-四川福彩中心在哪| www.950547.com-乐彩客彩票app| 彩8彩票www.c8712.com| www.331471.com-天天爱彩票安全吗| www.765505.com-乐盈彩票投注网站| www.817923.com-彩票排五走势图| www.125201.com-双色球彩票中奖| www.212015.com-大发快三提现失败| www.276632.com-盈彩网ccom-| www.367788.com-《七星彩》番外十| www.246815.com-三合皇彩票-| www.311617.com-五分快三神计划| www.120722.com-手机福彩投注安全吗| www.187985.com-赢彩彩票网站| www.251123.com-彩店宝彩票app| www.318453.com-南昌彩票-| www.627295.com-手机256彩票下载| www.81961.com-中发彩票平台| www.1314.cm-为什么买私彩总是输| www.48815.com-2分时时彩-| www.037441.com-彩票过滤软件最正规| www.130496.com-休闲花式快三教学| www.964928.com-体彩43期-|