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.198715.com-彩神1app正规吗| www.2627.live-惠普彩色打印机产地| www.8490.com-万利彩票的骗术| www.227595.com-多乐彩开奖号码| www.738009.com-开快三犯法-| www.6831.top-九w彩票-| www.839272.com-福利彩票是什么单位| www.902108.com-黑彩是怎么盈利的| www.32kc.com-福彩四码最大遗漏| www.993978.com-彩票最多能中多少钱| www.ji30.com-发彩网是真的吗| www.z87.cc-李彩桦单身部落| www.69ot.com-福彩如何看中奖信息| www.47gc.com-谁会玩新浪爱彩| www.719144.com-福彩三地今天开机后| www.195782.com-如何跳好快三| www.680120.com-福利彩票领奖去哪| www.233119.com-北京单场彩客网| www.280462.com-体育彩票官网首页| www.305606.com-王百万买彩票牛牛| www.365471.cc-福彩3d彩诗迷| www.833150.com-真实彩票店二维码| www.959849.com-彩票电子注册送28| 网易彩票www.504133.com| www.71203.com-找黑客修改博彩数据| www.801525.com-买彩彩票上团彩| www.cp11.com-福彩5d一等奖多少| www.513801.com-3d天天彩报纸| www.296168.com-天天彩票合法吗| www.416696.com-富利彩票官网下载| www.809379.com-哪种彩票中奖率高点| www.907150.com-中国彩票要买几位数| www.215670.com-体育彩票中6位数| www.576294.com-遵义体彩中心| www.201918.com-福彩助手绑定站点| www.hr57.com-甘肃福彩快三今天| www.90ma.com-w600彩票网-| www.54582.com-博胜彩票网投| www.14ke.com-时时彩开奖更改| www.05884.com-喜盈门彩票软件下载| www.358552.com-彩票站用的键盘| www.526191.com-王者彩票网-| www.55423.com-彩博888官网下载| www.305598.com-买彩票中一万| www.3229.biz-悟空彩票能提现吗| www.680185.com-乐彩3d蜂巢配胆图| www.126504.com-新浪彩票数字彩| www.927700.com-福利彩票是几个数字| www.743488.com-天天中彩网骗人吗| www.377300.com-体彩彩票开奖时间| www.541563.com-爱购彩票一级邀请码| www.15839.cc-彩铅花图片-| www.54ql.com-贵阳市体彩兑换地址| www.us87.com-彩票的专业术语| www.cp0355.com-彩神8快3是真的吗| www.5327.biz-u9彩票信得过吗| 小米彩票www.18005.com| www.tk58.com-福彩快三浙江| www.0842.vip-网上哪里买足彩| www.8039.vip-手机够彩票-| www.912692.com-天天爱彩票停了吗| www.971123.com-彩票有哪些类型| www.cp0206.com-一分快三怎样稳赚| www.ml64.com-彩68彩票-| www.067759.com-彩票平台租借| www.615431.com-入赘妻主多彩蒲香| www.508552.com-大众彩票网诈骗| www.643883.com-中华彩票网网易| www.784103.com-福乐彩网站是骗局| www.491918.com-体彩大透开奖| www.9591.biz-福彩3d独胆大师| www.966259.com-开彩传媒是骗局| www.cp1.hk-贵州福彩网双色球| www.h94.com-易网彩票开奖记录| www.4750.cn-精彩彩票727网址| www.984870.com-长城彩票在哪个地方| www.op63.com-彩票押大小技巧| www.16mf.com-河南省体彩-| www.999946.com-在香港买彩票| www.ct05.com-大奖网彩票是黑平台| www.434227.com-甘肃彩票中奖| www.025484.com-大乐彩历史开奖号码| www.21pm.com-福利彩票介绍| www.109236.com-hk百彩-| www.183313.com-体彩大乐透开奖查询| www.8983.top-马来西亚分分彩官网| www.734583.com-足彩十四场最新推荐| www.873226.cc-76时时彩彩票官方| www.25uw.com-高频彩票的漏洞| www.306531.com-为什么足彩都停售了| www.134474.com-南通体彩店怎么申请| www.821785.com-彩乐乐双色球杀号| www.053200.com-苏州彩票店转让信息| www.172599.com-福彩快3老版| www.273241.com-彩票监管-| www.369459.com-看彩啦-| www.505182.com-富游彩票app下载| www.1456.vip-彩铅画大全-| www.258598.com-湖北快三精准计划| www.rd74.com-体彩起源-| www.332716.com-艾彩登录-| www.671370.com-彩一万app下载| www.854373.cc-河南福彩一块三| www.cai5511.com快三走势图甘肃预测| www.043259.com-玩彩票app安卓| www.736069.com-玩彩票的有挣钱的没| www.880800.com-哪些是黑彩票网站| www.hw27.com-聚彩彩票骗局揭秘| www.979187.com-广州哪里有好彩烟卖| www.me05.com-中国足球彩票app| www.5918.love-365彩票苹果下载| www.732696.com-佰万彩票是真的吗| www.751080.com-速彩沈宇骗局| www.849600.com-香港分分彩免费计划| www.953778.com-金牛娱乐彩票| www.cp060.com-安微快三今天走势图| www.411256.com-彩神可以提现吗| www.577899.com-创造更多精彩| www.672211.com-高彩网88zzcc| www.772845.com-爱尚彩彩票正规吗| www.604161.com-竞彩5258官网| www.8710.org-6号彩票是干嘛用的| www.084.biz-zc222众彩网| www.234991.com-时时彩开奖500| www.575580.com-好运彩-登录| www.hs01.cc-新浪足彩直播| www.60796.com-福运彩票安徽快三| www.xs83.com-七星彩预测海报| www.964812.com-体育彩票e球彩规则| 大赢家彩票平台www.179237.com| www.8551.org-今天是什么彩票开奖| www.113460.com-能买彩票的app| www.27028.com-管家婆彩票论坛下载| www.110455.com-福彩新代码-| www.717.la-腾讯时时彩后二双胆| www.av56.com-福彩20选5走势图| www.2535.xyz-福利彩票一月利润| www.927302.com-褔彩3d跨度走势图| www.980837.com-彩票源码的基础知识| www.779510.com-竞彩网足球专家预测| www.nv24.com-中国体彩网电脑版| www.o32.cn-彩票分析app排名| www.870544.com-盛大彩票网站是什么| www.925558.com-广西快三三胆定一| www.969613.com-欢乐彩是真的吗| 彩民网www.76520r.com| www.xr31.com-35期彩票开奖| www.753091.com-什么人喜欢买彩票| www.8598.net-彩798彩票骗局| www.975402.com-滨州福彩客户端下载| www.jo73.com-一通快三赌博案| www.47uq.com-新浪爱彩网彩票| www.0010.ren-彩票都有几位数| www.53gl.com-银彩通官网-| www.929.online-49个数字型彩票| www.7422.com-乐和彩彩票走势图| www.54mw.com-彩票胆拖技巧| www.464883.com-无锡中彩集团| www.539013.com-众赢彩票娱乐平台| www.48ul.com-三国无参全彩| www.781728.com-中了5亿彩票税| www.953946.com-足彩分析-| www.ih82.com-中彩那天课文内容| www.64iz.com-众彩网快三-|