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.8592.com-安微快三最大遗漏| www.949230.com-北京快三能买大小吗| www.859936.com-五体彩5d走势| www.961465.com-吉林快三和值参照图| 网易彩票www.506729.com| www.82378.com-足彩比分比分直播| www.40489.com-中彩网讨论-| www.56883.com-休闲快三2-| www.484825.com-多彩网2599提现| www.576377.com-山西福彩十分| www.32851.cc-u彩娱乐平台| www.it46.com-官方彩票投注技巧| www.283522.com-七星彩怎样去领奖| www.894858.com-爱投彩票是正规的| 幸运彩票www.666937.com| www.zc41.cc-北京快三计算公式| www.187880.com-热门彩种-| www.594947.com-三彩的衣服质量好吗| www.13527.cc-胜负彩复式投注表| www.008212.com-褔彩选4-| www.140715.com-518彩票网app| www.586962.com-新版万彩吧-| www.660600.com-高频彩联盟pk10| www.309409.com-彩票预测网易彩网| www.468676.com-福利彩票中奖上海| www.184891.com-中国福利彩票手机买| www.273679.com-网购福彩3d-| www.348967.com-彩票热号-| www.439901.com-花呗充值彩票| www.535625.com-中过大奖的彩票| www.610161.com-手机qq彩色名字| www.99713.cc-河内五分彩开奖号码| www.085998.com-苏州体育彩票网站| www.008344.com-今晚的中国福利彩票| www.2183.shop-怎样玩彩票才能赚钱| www.913.cm-教手绘彩铅唯美蝴蝶| www.1228.bid-彩神汕水论坛| www.603695.com-梦见我买彩票好不好| www.8556.loan-大象彩票网站登入| www.42117.com-类似k彩的平台| www.88256.cc-能提现的彩票平台| www.713727.com-什么彩票软件比较好| www.209733.com-彩票报纸-| www.2785.wang-网上认证彩票网站| www.961026.com-七乐彩查询中奖号码| www.tg96.com-全部快三-| www.18oz.com-福利彩票微信二维码| www.922028.com-超级快三全天计划| www.995847.com-竞彩足球ios软件| www.tu04.com-彩票大数据中奖神器| www.266044.com-快三复式票玩法| www.080101.com-快三怎么逮豹子| www.869937.com-彩彩票开奖查询| www.990473.com-内蒙快三n-| www.3108.vip-疯狂赛车是哪个彩票| www.279474.com-时时彩老式走势图| www.612537.com-快乐十分彩-| www.135109.com-驻马店快三开奖结果| www.278098.com-香港中彩网-| www.292909.com-重庆时时彩技巧| www.356860.com-彩票立即开奖| www.467146.com-彩票开奘结果查旬| www.328630.com-存38送58彩金| www.437000.cc-大乐透彩之店投注| www.557026.com-福利彩票是真实的吗| www.9756.top-彩56下载平台| www.580688.com-彩票世界杯专家预测| www.679032.com-合法网上买足球彩票| www.13hv.com-7好彩高手论坛| www.1304.vip-体育博彩软件| www.308818.com-乐购彩-| www.369460.com-彩民红心水-| www.pp1.com-e球彩开奖结果| www.122645.com-刷彩票怎么牟利| www.216353.com-各种彩票的玩法| www.302458.com-甘肃快三走势图今| www.375537.com-特区七星彩论坛首页| www.55cl.com-都匀彩票站在那里| www.159198.com-足彩任九奖金| www.396361.com-博友彩的邀请码| www.622991.com-什么是红旗彩票| www.801138.com-福利彩票开奖玩法| www.ei13.com-中国彩吧-| www.67jv.com-太原彩票中心| www.7728.pw-天天分分彩合法吗| www.243822.com-体育彩票大乐透网站| www.888875.com-足彩容错是什么意思| www.155607.com-体彩19017排五| www.872855.com-分分彩计划稳赢版| www.976316.com-湖北彩礼钱明细表| www.48365.cc-体彩十一运夺金开奖| www.171819.cc-贵州体彩兑奖地点| www.557761.com-799彩票官网娱| www.841.gg-掌上彩票打不开| www.54464.com-时时彩后三购买| www.204108.com-内蒙古福彩下载安装| www.500250.com-各种彩色背景图片| www.581305.com-高频彩登陆网址| www.671568.com-彩票19019-| www.769160.com-天天好彩头-| www.863598.com-体育彩票发行中心| www.974143.com-五星彩票骗死人| www.fl26.com-齐鲁风采七乐彩查询| www.12hx.com-彩票3d财神论坛| www.178707.com-一分钟快三官网| www.238930.com-彩票套彩什么意思| www.250729.com-中彩彩票网址下载| www.315562.com-局王七星彩奖表规律| www.16wy.com-网络彩票诈骗破案率| www.ws45.com-彩票分分快三app| www.799505.com-开发一个彩票app| www.897931.com-竞彩店和体彩店区别| www.961631.com-分分快三规律押注| 500彩票网www.61655p.com| www.sq.com-福利彩票快3是什么| www.847825.com-福彩几等奖说明| www.899159.com-免费彩票api| www.965675.com-今天i海快三开奖| 世彩堂www.5854q.cc| www.zf2.cc-福彩快三哪几个省有| www.17638.cc-足彩竞猜赛果| www.1717.in-红蚂蚁团队彩票计划| www.22815.com-给五课中彩那天组词| www.886441.com-93彩票下载-| www.639074.com-深圳体育彩票发展史| www.984272.com-彩八官方网站| www.06pq.com-海口福彩快2| www.76hm.com-马耳他彩票开奖| www.67hy.com-太原福彩热线电话| www.0247.cm-福彩游戏跟单骗局| www.763386.com-收米竞彩app| www.597590.com-福彩三d图谜汇总九| www.io13.com-乐乐彩票怎么样| www.021811.com-酷彩安卓版-| www.101412.com-立彩合法吗-| www.190089.com-彩票开奖公告| www.98745.com-快开彩票怎么玩法| www.082833.com-玩快三一年了| www.da69.com-命中中彩专栏| www.3ay.com-京彩集团是合法的吗| www.301.link-快三怎么看长龙| www.6280.vip-六哈彩开奖记录| www.009613.com-广西快三在线计划| www.905091.com-郑州彩票店转让信息| www.675286.com-福利彩票24期开奖| www.776024.com-我玩时时彩输的想哭| www.855038.com-澳门天麟国际购彩| www.939945.com-吉林快3彩票平台| www.998686.com-西华体育彩票| www.aj36.com-七星彩没人敢买了| www.258726.com-中国足彩网老版本| www.01313.com-注册彩金送58| www.085007.com-天天赢彩票登录| www.9667.net-体彩排三彩宝网| www.70021.com-十一运夺金彩乐乐| www.755515.com-大乐透旺彩查询| www.014567.com-七星彩前四位预测| www.2961.top-福彩3d牛彩杀码图| www.s04.name-广西快三新玩| www.74dj.cc-环球时时彩网站| www.963528.com-欧洲彩票代购平台| www.rq82.com-河南彩色透水混凝土| www.002401.com-苏州体彩网点申请| www.866698.com-268彩票网-|