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.52111.cc-福彩胆码预测| www.cai3944.com吉林快三下载开奖| www.128243.com-买体育彩票软件| www.69814.com-广东11选五彩乐乐| www.612811.com-彩票金额排行榜| www.815122.com-网上足彩骗局| 火星彩票www.hx6606.com| www.590087.com-江苏快三有几期| www.669241.com-体彩排三藏机图字谜| www.858676.com-凤凰彩票我的账户| www.993636.com-足彩开奖一般在几点| www.sl05.com-时时彩靠谱投注平台| www.679688.com-戒烟戒毒戒彩票| www.802780.com-福彩总部电话号码| www.205432.com-内蒙福彩3d开奖| www.330021.com-天牛图库中国彩吧| www.476561.com-乐福彩票邀请码| www.181069.com-彩68app下载| www.97606.com-青蛙彩票网-| www.136777.cc-77彩票可信吗| www.440161.com-百保彩显示屏更新慢| www.541164.com-体彩大乐透开奖| www.790376.com-彩票伪随机数| www.892568.com-福彩3地开奖号码| www.ja24.com-福彩双色球开奖查询| www.159671.com-七星彩开心网论坛| www.116676.com-福彩彩吧首页| www.933134.com-广东实时彩开奖号码| www.00432.com-华彩赢家能不能赢钱| www.054604.com-福利彩票老时时彩| www.053556.com-彩票cp816骗局| www.150041.com-必中彩票网页版| www.8639.xyz-中国彩票都是假的吗| www.796243.com-头奖彩票首页| www.919792.com-手机彩票平台源码| 大赢家彩票平台www.376357.com| www.527230.com-永旺彩票直播网| www.816000.com-今晚福彩3d猜谜是| www.929679.com-1七星1七星彩| www.767318.com-乐彩双色球走势图| www.513501.com-三分重庆时时彩计划| www.666128.com-卖一注彩票挣多少钱| www.948954.com-彩票网有哪些| www.31fz.com-博一吧首存彩金| www.7565.in-东方集团彩票| www.34416.com-双色球乐彩网首页| www.940522.com-一分钟开奖是黑彩吗| 网易彩票www.064wy.com| www.ob55.com-易彩堂主页-| www.2819.xyz-吉林福彩新快三| www.08937.com-东莞体彩兑奖中心| www.465946.com-兴华彩票app下载| www.88ag.com-彩票009网正规吗| www.109522.com-3d彩吧论坛开机号| www.799800.com-送彩金白菜qq群| www.876962.com-七乐彩4个号多少钱| www.5388.com-108彩票网站| www.03971.com-下载豪彩娱乐账号| www.52815.cc-好彩投app靠谱吗| www.96151.com-福彩慈善工作体会| www.920045.com-彩票摇-| www.397544.com-彩票春节停几天| www.701178.com-福彩通app下载| www.914779.com-v98彩票平台| www.zv82.com-体彩何时开通竞彩| www.296523.com-江西快三彩彩乐| www.462321.com-五颗星彩票陷阱| www.824431.com-福利彩票单式选4| www.894467.com-快三过滤器下载| www.978822.com-雷诺好彩一彩彩乐| www.vx9.com-彩票澳洲5分彩| www.tu56.com-快3彩票单-| www.05mt.com-彩29登录-| www.211086.com-随州论坛快三论剑| www.306781.com-南昌福彩开奖| www.26052.com-雨后彩虹象征什么| www.69965.com-彩经网怎么打不开机| www.92447.com-大乐透一定牛彩票| www.631545.com-体育七星彩走势图| www.696132.com-足彩奖金计算器软件| www.768098.com-中国福利彩票新闻| www.830208.com-盈彩团队-| www.887878.com-106彩票投注网站| www.950520.com-全民彩票旧版app| 500彩票www.50024m.com| www.211250.com-中国福彩湖南快三| www.326371.com-七星彩上官燕预测| www.439978.com-贵州体彩新闻| www.9973.shop-彩票榜如何赢| www.23gy.com-小马哥天下彩| www.gk43.com-众赢彩票下载| www.793.mobi-易彩乐福利彩票| www.9564.cm-别有风彩的意思| www.025762.com-喜乐彩票充值平台| www.200771.com-七星彩论坛精选| www.al57.com-福彩藏机图排列三图| www.h47.biz-澳洲五分彩走势图| www.948.cc-七星彩中奖最高纪录| www.215113.com-彩富网正版资料| www.1045.cm-亿万彩票网站| www.12283.com-爱乐透体彩app| www.90452.com-彩娱乐彩票| www.272183.com-997彩票靠谱吗| www.57021.com-彩播是什么直播平台| www.76156.com-彩票可以对折吗| www.70xm.com-云南彩易达-| www.3989.in-河北福彩双色球中奖| www.77344.com-955彩票ios-| www.112014.com-彩票团队大小计划网| www.870178.com-五福彩彩票是真是假| www.632309.com-七星彩的中奖方法| www.gk88.com-湖北快三百万高手| www.209.pw-精美水溶彩铅画图片| www.070321.com-彩神争8靠谱吗| www.lg5.com-福彩快三群真的假的| www.257257.com-豪彩平台app| www.433174.com-500彩票双色球| www.682286.com-微信支付买足彩| www.168932.com-快三胆拖投注计算器| www.901592.com-体育彩票排列5预测| www.4559.biz-彩票买什么号中奖| www.557876.com-大赢家彩票是真是假| www.559051.com-包头体彩中心在哪里| www.672637.com-手机买足彩的软件| www.786668.com-1分极速彩-| www.921410.com-关于91彩神-| 福彩www.16878i.com| www.51zg.cc-互娱彩票举报电话| www.8917.biz-聚福彩票网-| www.125012.com-中国的福利彩票| www.137507.com-彩票注册送钱| www.660937.com-爱乐透彩票开奖公告| www.944623.com-体彩论坛17500| www.190400.com-快三游戏网络平台| www.362596.com-中国彩票趋势图| www.652099.cc-福彩哪种开奖最快| www.560603.com-博金彩票官方网站| www.719537.com-彩票官网平台| www.717870.com-彩民周刊编辑组小宋| www.957417.com-足彩加官网下载| www.ia79.com-彩票坊被骗-| www.630426.com-好彩爆珠台版| www.36dm.com-彩票购买支付宝账号| www.8ky.com-百盛彩票下载| www.50in.com-最新彩票预算软件| www.151878.com-体彩排列5预测| www.356269.com-购彩下单网址| www.975848.com-林州彩礼价目表| www.m82.club-彩票开奖图表走势| www.8042.cc-海边沙滩水彩画| www.71ee.com-118彩票网址| www.li59.com-人人中彩app下载| www.h17.xyz-七星彩寒若冰| 中彩网www.81233k.com| www.733485.com-全民彩票张公岭| www.869197.com-七星彩机选号码器| www.j15.com-福彩十选五游戏规则| www.318552.com-500·彩票-| www.867728.com-手机摇彩票-| www.669453.com-谁有海南七星彩网址| www.796497.com-今天玩分分彩亏大了| www.915889.com-湖北快三查-| www.971569.com-2分彩可靠吗| 豪彩VIPwww.912278.com|