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.051802.com-万豪彩票助手| www.213159.com-彩票网站搭建多钱| www.813234.com-微信女孩玩彩票| www.894854.com-709彩票下载| 818合彩www.www.9889hc.com| www.614327.com-福彩世界网站| www.721681.com-新浪彩票足彩比分| www.816810.com-彩票命啊-| www.887235.com-快乐彩怎么玩才赚钱| www.972123.com-柬埔寨一分彩走势图| www.cp9979.com-湖北快三一天多少期| www.91311.com-好彩四味爆珠多少钱| www.117079.com-竞彩计算-| www.74672.com-竞彩旗舰店-| www.088056.com-双赢彩票能赚钱吗| www.891073.com-大奖彩票下载安装| www.cp0511.com-一分快三破解版| www.099915.com-博大彩票下载安装| www.53387.com-51彩票下载安装| www.18nj.com-今晚有什么彩票开奖| www.ve38.com-河南福彩百度网| www.818.top-彩票直播平台| www.576522.com-河北体彩几点开奖| www.590854.com-奥门彩票-| www.828397.com-665彩票网-| www.940092.com-彩票98app-| www.60055.cc-优游彩票软件| www.320911.com-百宝彩下载-| www.501221.com-彩879-| www.614030.com-看图买生肖彩票| www.082989.com-快三有什么秘密技巧| www.328602.com-永利皇宫送彩金39| www.478575.com-深圳福彩官方网查询| www.696109.com-财神彩票网址注册| www.962060.com-彩票彩民版是真的吗| www.ke94.com-福利彩票中奖查询| www.555.tv-58彩开奖结果| www.dx99.cc-共赢彩票吧-| www.64rf.com-体彩单双大小走势图| www.838384.com-重庆时时彩傻瓜打法| www.968403.com-美国时时彩开奖号码| www.074792.com-爱乐透彩票不更新| www.09ue.com-体彩大乐透几点封盘| www.4868.org-趣彩彩票正规吗| www.88441.cc-英国历史彩票最大奖| www.567784.cc-怎么能种彩票| www.888894.cc-彩站宝怎么扫码出票| www.bx74.com-福彩快三单式| www.54wj.com-什么是彩票开机号| www.08207.com-长沙体彩兑奖地址| www.013407.com-特区彩票网论坛| www.220535.com-分分中彩票下载安装| www.359156.com-时时彩微博-| www.563611.com-彩2app-| www.756983.com-全民彩票在线| www.878100.com-分分彩刷量赚日工资| www.971418.com-彩票店主众筹| www.cp0.cn-甘肃快三开奖查询| www.t39.org-时时彩宝贝计划在线| www.64tn.com-发微信买彩票中奖| www.817289.com-奥5时时彩走势图| www.967184.com-竞彩兑奖时间有效期| www.gl88.cc-福彩网下载-| www.775331.com-华彩在线1-| www.05540.com-彩票号码过滤| www.791264.com-梦见中彩票了| www.928627.com-海南彩票快速玩法| www.cp7008.com-安徽快三开奖号码哇| www.g70.cc-下载查看万彩吧资料| www.629.bid-7天彩苹果下载软件| www.80858.com-福利彩票投诉电话| www.528180.com-时时彩开奖早知道| www.799563.com-五分快三猜号技巧| www.999327.com-e球彩三场全包奖金| www.wl71.cc-凤凰vip快三下载| www.456876.com-幸运飞艇开奖彩网| www.579635.com-逸彩老师-| www.652921.com-天空彩票49cc| www.766914.com-彩界精英双色球成绩| www.836877.com-318彩票是骗子| www.896419.com-十分彩官方下载| www.951642.com-趣头条彩票平台| www.990664.com-澳客足彩必发交易量| www.cp9665.com-中彩在线软件| www.oo93.com-彩票正确的倍投方法| 七乐彩票www.qilc8.com| www.ms92.com-福彩二十选五走势图| www.879287.com-智慧彩票预测准吗| www.949776.com-首页彩票网-| 亚洲彩www.68568s.com| www.rg16.com-投注平台彩种多| www.39655.com-天天中彩邀请码| www.555935.com-宿迁洋河中彩票奖| www.620596.com-山东彩票20选5| www.685199.com-江苏快三定牛| www.768445.com-黑彩有漏洞吗| www.830737.com-千福彩票邀请码| www.888753.com-体彩金7乐玩法规则| www.947430.com-99彩吧新彩吧| www.982935.com-新盈彩官方平台| www.cai3363.com快三投注-| www.jc11.com-幸运快三全天走势图| www.05rc.com-福彩3d历史开奖号| www.76xs.com-北京七星彩开奖结| www.1973.cc-巨龙彩票app下载| www.6796.top-时时彩半顺是什么| www.11318.cc-彩票一一-| www.47414.com-招财猫彩票官网| www.83956.com-燕赵福彩排列七开奖| www.53qy.cc-ll彩票开奖-| www.1188.ren-彩票中4亿-| www.95729.com-那种彩票正规| www.302282.com-体彩第19095期| www.401720.com-天天彩票官方直营网| www.318270.com-水彩花卉-| www.405315.com-七星彩如何买彩票| www.297921.com-手机体彩在线| www.604454.com-买大小的彩票app| www.775793.com-海盗团队彩票计划| www.69543.com-彩票网入口-| www.820229.com-各种天价彩礼| www.251652.com-登录亚彩会-| www.56893.com-彩神吧-| www.066721.com-重庆市福彩官网| www.890746.com-体彩4串4-| www.30196.com-揭秘时时彩骗局| www.87228.com-快三35期-| www.085007.com-天天赢彩票登录| www.2zh.cc-欢迎观临台湾福星彩| www.1532.vip-湖北福彩投注| www.00048.cc-彩色包装盒印刷价格| www.51821.com-福彩3d定位-| www.93668.cc-微彩娱乐登入| www.049959.com-快三买法稳赚不赔| www.130840.com-洛阳伊川彩礼| www.228249.com-河南哪里彩礼最高| www.289894.com-网上的彩票是真的| www.356259.com-彩票的数学原理| www.252263.com-体彩屋是骗局| www.322035.com-亚博阿里彩票| www.542608.com-三分快三网站| www.750427.com-宁德体育彩票网点| www.811588.com-优博彩票平台官网| www.869017.com-百盈快三怎么做假| www.916018.com-如何申请一家福彩店| www.972549.com-水彩画天空-| www.kg.cc-105彩票app-| www.189816.com-福彩42期中奖号码| www.305769.com-彩票可以一次买几期| www.460065.com-彩69app合法吗| www.662854.com-关于国彩-| www.878482.com-快三注册-| www.087562.com-云彩厅app-| www.60390.com-专业网络彩票| www.019548.com-山西体彩中奖| www.724247.com-湖北福彩快三能玩吗| www.99616.cc-山东省福利彩票网| www.468708.com-168分分彩票下载| www.608442.com-福彩三d八卦图| www.973440.com-彩虹宝宝第三季| www.kj27.cc-彩票走势图新浪| www.11qg.com-彩567-| www.915485.com-淘彩票客服-| www.980839.com-彩票源码购买|