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.43xy.com-为你出彩什么意思| www.537760.com-彩色面团-| www.639747.com-彩票周周返水| www.770351.com-欧版好彩-| www.837720.com-彩票app官网下载| www.908073.com-彩票预测七星彩电话| www.974200.com-福彩快三有几种玩法| www.cx7.com-福彩理念-| www.te84.com-发彩网彩票注册| www.289753.com-快乐彩34-| www.499976.com-集缘彩票-| www.560980.com-七乐彩5行6纵| www.661084.com-彩票大集合-| www.668853.com-百度华人彩票| www.782815.com-福彩鬼六字谜| www.875907.com-体彩走势图综合版| www.950089.com-互联网销售彩票工作| www.998800.com-天津福运快三走势图| www.de87.com-官网快三软件下载| www.zq91.cc-舟山飞鱼彩票| www.34mn.com-网上那些彩票代玩| www.158462.com-足彩北单玩法| www.278818.com-体彩e球彩开奖| www.369217.com-新疆体彩兑奖地点| www.004148.com-体彩20分钟一期| www.273975.com-分分彩计划-| www.729011.com-3d南方双彩-| www.824863.com-u9彩票网靠谱吗| www.894861.com-i8彩票台子怎么样| 万利www.32123j.com| www.ze20.com-春秋彩票手机版| www.52vh.com-凯利方差算足彩概率| www.059160.com-nba体彩分析| www.167263.com-快三倍投表-| www.250057.com-冀彩宝现在能用吗| www.328826.com-彩票精准计划聊天室| www.409565.com-网易彩票结果| www.554484.com-七星彩超级组合| www.58oi.com-彩票未领取名单| www.fw11.com-5亿彩下载-| www.22658.cc-彩票店转让注意事项| www.88827.com-333彩票下载软件| www.066994.com-红快三开奖结果直播| www.180030.com-彩票开奖大乐透| www.249009.com-中奖彩票苹果版| www.321288.com-七星彩票出奖| www.391397.com-779彩票正版资料| www.502703.com-多彩投游戏-| www.571608.com-福彩三等奖是几个数| www.644470.com-体彩千万大奖得主| www.766350.com-极速飞艇购彩计划| www.799537.com-体彩超级大乐透开奖| www.879157.com-新浪福利彩票| www.954704.com-体彩手机在线下载| 老彩民www.060888.com| www.739844.com-132彩票网-| www.819762.com-彩票哪里买哪里兑奖| www.888256.com-彩票真伪查询| www.953474.com-马来西亚彩-| 实亿国际www.sygj4.com| www.dl81.cc-五分快三计划平台| www.us29.com-彩票走势图大全搜狗| www.06pg.com-兰州市福彩中心主任| www.74ho.com-cb8c0m彩宝票| www.1151.cn-凤凰天机六个彩资料| www.8216.cn-玖富彩票网-| www.26909.com-新2彩票网站论坛| www.77738.cc-彩尊国际手机版下载| www.555543.com-彩尊客户端下载官网| www.555097.com-快三怎样测龙| www.623912.com-乐彩购下载-| www.705224.com-东莞福利彩票中心| www.51nq.com-大赢家足球彩票软件| www.0120.com-中彩网3d字谜汇总| www.6385.vip-三星彩票下载安装| www.019778.com-体彩竞猜还能搞几年| www.494334.com-足彩一定牛分析推荐| www.65590.cc-中好彩2是多少钱| www.019030.com-苏州彩票兑奖中心| www.105646.com-c59彩票四不像| www.170515.com-江西快三预测| www.36ze.com-七星彩91b-| www.2066.vip-旺旺彩票app网站| www.9938.loan-江苏体彩排列3预测| www.63432.com-365彩票官方版| www.km96.com-广州快三查询| www.4ww.com-福利彩票怎么看走势| www.69ks.com-安幑快三-| www.0884.top-易彩开奖-| www.858.space-极彩登陆网页| www.6350.org-曲昌春讲故事看竞彩| www.10095.cc-卖彩票数据赚钱吗| www.52450.cc-东盛彩报1-| www.068768.com-福彩十二生肖刮刮乐| www.196603.com-博彩app下载| www.285358.com-福彩快3助手官网| www.372965.com-玩彩票经验总结| www.905105.com-彩票行业前景如何| 500彩票www.325477.com| www.ss50.com-彩票33苹果版下載| www.61cp.cc-完美彩票1app| www.1299.com-甘肃11选5爱乐彩| www.163495.com-爱彩是骗人的吗| www.322843.com-体育彩票481购买| www.sq60.com-浙体彩6十1开奖| www.141421.com-彩民彩票怎么打不开| 99彩票www.29699.com| www.ky07.com-玩快三输了25万| www.v30.biz-网上怎么买竞彩| www.13729.com-0k彩票下载-| www.89578.cc-2014世界杯足彩| www.075211.com-瑞彩祥云可靠吗| www.155109.com-足彩兑奖规则| www.235552.com-500万彩-| www.331250.com-81彩下载官方下载| www.86lz.com-七乐彩官方下载| www.4797.me-彩虹六号不过审| www.42kh.com-七彩阳光视频播放| www.904369.com-8k彩票下载安装| www.15vq.com-高价彩礼害死人| 彩客博www.8667x.com| www.281857.com-六给彩票玩法| www.416100.cc-a7娱彩注册-| www.525961.com-香港七星彩几点停售| www.617573.com-中彩网用户登录| www.78199.cc-福彩选号方法与技巧| www.30002.com-体彩网官网-| www.317487.com-竞彩怎么投注最稳| www.682509.com-彩票公益金使用范围| www.824061.com-下载3d彩票开奖| www.918926.com-体彩假票-| www.969138.cc-天天中彩票可靠么| www.ik80.com-中国彩票投注| www.187696.com-时时彩的玩法怎么玩| www.71dy.com-vr时时彩接口| www.783531.com-购彩堂app下载| www.839320.com-唯彩会老盘推荐足彩| www.378055.com-3抵制天价彩礼3| www.495752.com-8816彩票平台| www.1384.xyz-看彩票app-| www.6823.xyz-好彩绿色紫色双爆珠| www.15681.cc-彩客彩票310| www.04403.com-天天中彩票微信提现| www.152920.com-彩票资金构成比例| www.439961.com-彩票课文分段| www.550076.com-优彩戴泽新-| www.696785.com-下载竞彩网-| www.115693.com-内蒙福利彩票双色球| www.225494.com-谁有时时彩群| www.303319.com-好彩客1.1老版本| www.369871.com-彩之云平台-| www.444003.com-亚搏彩票口啤怎么样| www.519221.com-乐盈彩票骗局| www.594419.com-彩票777软件| www.653602.com-彩中堂挂牌-| www.769065.com-代买彩票app| www.813094.com-线上体彩怎么赚钱| www.865918.com-彩票赌光-| www.856138.com-彩票娱乐反水| www.945432.com-福彩双色球近500| 百姓彩票www.bxcp3.com| www.fi10.com-四川快三走势图| www.799601.com-腾讯彩票信得过吗| www.610286.com-什么彩票三位数|