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.101347.com-中彩网三d北斗分析| www.272957.com-60注彩票骗局| www.380554.com-体彩预测号码推荐| www.512096.com-冰蓝凤凰彩铅画| www.853013.com-头彩网骗局-| www.85229.cc-珠海恒彩酒店| www.941179.com-中福快3时时彩| www.bc51.com-玩多乐彩被骗两万多| www.01tl.com-怎么用支付宝买彩票| www.663409.com-澳门2分彩-| www.60hs.cc-招聘彩票销售人员| www.57912.cc-乐意彩票-| www.42892.com-天津体育彩票走势图| www.059644.com-新浪竞技体育彩票| www.54988.com-安徽福彩快三中奖表| 500彩票www.66653r.com| www.559416.com-下载陇彩宝-| www.317323.com-足彩胜负彩技巧| www.519085.com-蚂蚁彩票app| www.680973.com-佳缘男七星彩骗局| www.826398.com-手机彩色贴纸| www.954485.com-口袋彩店二维码| www.av23.com-体彩p3-| www.o16.xyz-玩网彩输怕了| www.6789.cm-浙江快彩开奖号码| www.0888.cm-火星彩票下载| www.856038.com-台北快三计划网址| www.563055.com-体彩三个亿-| www.676653.com-安装七星彩排列五| www.789648.com-京彩集团-| www.873593.com-真福彩早早报| www.976204.com-彩礼五万寓意| www.sk1.com-双彩网论坛手机版| www.yn95.com-网上买彩票骗局| www.62jx.com-彩票组合软件3d| www.373783.com-彩智彩票app| www.32239.cc-竞彩足球比赛结果| www.831668.com-中国彩票网址下载| www.00067.cc-彩娃彩票app官网| www.85334.com-玩彩票到底有多害人| www.521339.com-彩票跟群计划| www.627431.com-福彩三d三字谜| www.700438.com-彩界之首专家专栏| www.3406.vip-彩报王663299| www.60103.com-福彩中心新规定| www.051272.com-彩票开奖号码作假| www.374366.com-168彩票资料大全| www.kj82.cc-易彩网彩票官网| www.113814.com-彩涂铝卷设备| www.922649.com-彩票软件大全苹果| www.55297.com-时时彩怎么打才稳| www.21nq.com-福彩3d胆码图库| www.39665.cc-天天彩票找不到了| www.213518.com-彩票ⅱ选5-| 金冠彩票www.49956s.com| www.sd75.com-3d福彩天牛图厍| www.72af.com-nba体彩怎么买法| www.889479.com-百乐彩客户端手机版| www.692290.com-福彩主任冯贪3千亿| www.802314.com-福彩3d开奖给果| www.894967.com-7彩网合法吗| www.08ja.com-七星彩小说评论| www.298.cm-七星彩中得了大奖吗| www.281121.com-私自卖彩票犯法吗| www.507798.com-微力彩芽-| www.31121.com-彩票小助手官网| www.137074.com-七彩的意义-| www.498172.com-01平台网上彩票| www.685201.com-福彩多邦预测| www.278187.com-分分钟中彩票app| www.9039.com-怎么查询福彩站点| www.39735.cc-吉林快三推荐和值| www.n91.net-年会送员工彩票| www.751950.com-云顶国际博彩| www.826173.cc-速赢彩app-| www.887323.com-038彩票破解| www.949834.com-炫乐彩票靠谱吗| www.992221.com-时时彩组选包胆规则| www.36896.cc-体彩排列三今曰预测| www.655556.com-网易一彩票网| www.cp499.com-福彩快三是真的吗| www.5664.wang-博彩软件哪个好用| www.29283.cc-彩虹拼音-| www.502928.com-玩私彩有人赚钱没| www.52117.cc-惠普彩色复印机| www.028150.com-高频彩彩票投资技巧| www.124306.com-500彩票交流群| www.97fd.com-博有彩下载-| www.972197.com-印尼五分彩开奖网站| www.319418.com-彩票中奖短信生成器| www.716004.com-玩彩票倾家荡产的人| www.23944.cc-海南七星彩微信诈骗| www.94251.com-云南体育彩票网站| www.1hb.cc-合肥省级福彩中心| 大赢家彩票平台www.609816.com| www.263011.com-彩票骗人的吗| www.412788.com-篮球竞彩怎么买| www.527122.com-盈博彩票是正规的吗| www.603191.com-福利彩开奖记录| www.693905.com-在线体育彩票app| www.791140.com-彩票软件模拟买卖| www.968743.com-彩世界手机版apk| www.338647.com-多金喜彩票-| www.536721.com-福利彩票有那些| www.617972.com-体育彩票出兑长春| www.684772.com-彩c02彩票登陆| www.760902.com-在线计划时时彩| www.828365.com-福彩3d追号计算器| www.893391.com-彩票中奖计算| www.956233.com-下载彩票开奖查询| 126彩票网www.126ll.com| www.2155.net-买体彩还是买福彩好| www.8747.vip-小炮福彩开奖直播| www.44169.com-白银福利彩票站点| www.51363.cc-湖南体彩网官方网站| www.583782.com-中彩股哈市-| www.84uf.com-大发彩票站-| www.2594.vip-好运彩快三aqq| www.74nc.com-快三除三余数走势图| www.0514.tv-香港吉利彩票官网| www.4883.vip-5258竞彩官方网| 中彩网www.91233x.com| www.701064.com-彩票通资讯完整版| www.806728.com-网络上怎么买彩票| www.878944.com-今日福体彩开奖号码| www.946661.com-工地彩钢瓦围挡做法| www.986811.com-七乐彩专家推荐汇总| www.pm4.cc-新疆福利彩票| 500彩票www.50024g.com| www.62mx.com-福利彩票一等奖税率| www.438255.com-2016欧洲杯彩票| www.588231.cc-小米彩票官网app| www.673925.com-宫廷建筑彩画| www.745977.com-彩43网站-| www.836356.com-雄鹿快三计划软件| www.895130.com-爱投彩票赚钱吗| www.970488.com-买彩票守号能中奖吗| www.cp1288.com-江苏快三精准| www.208606.com-江南彩姐专栏| www.388479.com-支付宝还能买彩票吗| www.7109.pw-特区论坛七星彩| www.0170.loan-七彩色渐变图片| www.689002.com-福利彩票怎么买数字| www.884810.com-全球彩票官网| www.365100.com-买彩票是凭运气吗| www.682661.com-国家对彩票站的政策| www.32xp.com-彩票挂机脚本| www.940024.com-吉林快三现金盘| www.lh68.com-彩8彩票安卓旧版| www.210950.com-六安福彩快3| www.le.com-宁夏福彩快三下载| www.848299.com-彩票快三奖金是多少| www.902675.com-亚朵网彩票-| www.956019.com-彩票开发程序员判刑| 网易彩票www.073wy.com| www.y31.org-彩票足球软件哪个好| www.083005.com-快三每个省都有吗| www.614982.com-球彩台无插件直播| www.715927.com-体育彩票有没有妙招| www.839177.com-盛弘彩票-| www.967134.com-彩票开奖3d和值表| www.ck8.com-中国福利彩票的性质| www.99ms.com-体彩排三组三走势图| www.82593.com-足彩十四比分直播|