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.7478.com-体彩终端机额度| www.086837.com-彩富彩票app| www.667272.com-赛马彩特-| www.772808.com-时时彩买彩技巧| www.02133.cc-博彩送彩金可提款| www.512775.com-凤凰彩铅画图片| www.84ue.com-2016体彩-| www.7859.top-足彩14场投注比例| www.52724.com-七彩视界真的假的| www.865618.com-快三心得体会| www.cp170.com-大发彩票app| www.qr47.com-福彩的宗旨心得体会| www.m33.top-福满天体彩店合法吗| www.541204.com-如何做彩票代| www.cp3122.com-快三游戏单机版下载| www.50lm.com-彩客网在线过滤| www.0447.vip-四级彩票-| www.87xu.com-微信快频彩票| www.5558.cm-幸福彩前天的节目单| www.vb16.com-福彩3d万彩吧| www.27wj.com-分分彩哪里可以买| www.cai5810.com正规的购彩app| www.905466.com-足彩19042任九| www.977345.com-河南彩礼给多少| www.cp8938.com-北京福彩网快三开奖| www.669332.com-彩票统计器手机版| www.145452.com-福彩所有玩法介绍| www.04zz.com-看福彩开奖结结果| www.339543.com-体彩3d藏机图| www.888864.cc-彩票的返奖面仿真| www.ke08.com-快三福彩下载安装| www.558654.com-腾讯彩票下载ios| www.588555.com-七星彩090期开奖| www.21726.com-银行卡打彩金犯法吗| www.082383.com-118彩票有假吗| www.202014.com-江苏快三综合走势| www.5730.vip-公司发彩票-| www.82550.com-一定牛彩票旧版首页| www.r32.com-体彩官网售后有保障| www.024958.com-合肥彩票站转让| www.668892.com-中国人在外国买彩票| www.6028.biz-福彩打票机器教程| www.735422.com-快三中奖了-| www.839228.com-75彩app-| www.914928.com-鸿运彩破解器| www.977217.com-濮阳彩礼规定| www.hb.com-安徽快三出什么号| www.570711.com-德国彩票开奖号码| www.666758.com-吉隆坡快三是真的吗| www.550166.com-福彩扫码验奖| www.651977.com-彩票巨奖排行| www.726922.com-乐福彩票可以提现吗| www.814719.com-888博彩专业网站| www.881723.com-辉煌彩票网址| www.948612.com-彩票公益金申请书| 博友彩www.371o.cc| www.579054.com-八个人玩狮子机彩金| www.674546.com-河南福彩官网走势图| www.757228.com-彩色混凝土路面材料| www.860332.com-彩票app开发网站| www.929230.com-福彩网是不是假的| www.978497.com-49gcc特彩网| www.cai9166.comhao123彩票| www.901121.com-中国体彩报电子版| www.971848.com-手机版下载8号彩票| www.cp781.cc-北京快三开奖号| www.775724.com-彩票网站源码下载云| www.863687.com-qq上说彩票挣钱| www.4427.cc-吉林派彩免费版| www.0353.pw-彩票跨度投注| www.085554.com-凤凰彩票最新app| www.077338.com-高频彩是赌博吗| www.177144.com-一分快三是真的吗| www.261332.com-极速时时彩走势图| www.261967.com-彩票查询开奖结果| www.716585.com-彩铅画培训-| www.797736.com-588彩票网址| www.93.me-红牛福彩下载安装| www.42905.com-天津彩票快乐十分| www.026086.com-淘宝买彩票合法吗| www.775267.com-大富彩票平台| www.801914.com-今天的福彩中奖号码| www.908250.com-七乐彩选号计算公式| 818合彩www.www.5666hc.com| 500彩票www.546477.com| www.gr00.com-河南彩票22选5| www.yo41.com-美女带着买彩票骗局| 500彩票www.26299o.com| www.m78.top-黑彩平台怎么制作| 网易彩票www.560706.com| www.lg59.com-993彩票app-| www.636484.com-彩虹频道直播源分享| www.751663.com-端彩祥云app链接| www.930978.com-各地区快三开奖| 中华彩票www.914906.com| www.l91.com-天天彩app下载| www.1226.vip-救世博彩-| www.82at.com-竞彩足彩盈亏指数| www.555457.com-快三历史数据| www.456738.com-蛋蛋彩画-| www.632561.com-一定牛体彩应用软件| www.836829.com-下彩票旧版免费| www.727645.com-忆彩彩票下载| www.xr55.com-新手入门买彩票| www.010609.com-深圳熊猫彩票| www.913890.com-国彩平台总代邀请码| www.cp209.com-至尊快三彩票| www.7pq.com-彩票4月-| www.622.date-幸运中福彩下载| www.8391.cn-七星彩三码定位| www.077456.com-趣彩彩票官网| www.393525.com-今晚彩票开什么| www.320288.com-江苏快三直播走势图| www.525917.com-彩票上税百分之多少| www.602506.com-福利彩票申请表| www.813189.com-香港的彩金可以买吗| www.d24.bid-www.皇都彩票| www.99cy.com-澳门有哪些博彩| www.128921.com-彩票节目-| www.08200.com-彩票平刷教程| www.53292.cc-正规最大时时彩平台| www.502187.com-彩票提现流水| www.795859.com-福建天天彩-| www.kt55.com-卖彩票怎么赚钱| www.6091.biz-在国外中了彩票| www.090550.com-体彩排三走势图表| www.288914.com-中国体育彩票走势图| www.08pz.com-网络彩票分析师骗局| www.272179.com-广西快三44遗漏值| www.706358.com-福彩3d复式7码| www.858746.com-七乐彩直播开奖软件| www.n94.net-分分彩大小技巧经验| www.265281.com-福彩3d领袖吧| www.422611.com-彩乐乐群英会下载| www.567442.com-体彩3d42-| www.90557.com-3b福彩网站大全| www.je44.com-福彩预测专家最准| www.507752.com-鸿运彩票手机客户端| www.616161.cc-竞彩胜平负怎么玩| www.685368.com-福彩3d一周计划| www.755336.com-彩牛彩票安卓版| www.844806.com-体彩活动结束了吗| www.934480.com-即时开彩新版| www.cp3155.com-福彩快三官方下载| www.32058.com-易彩集团正规吗| www.823499.com-彩涂釉施工价格| www.388334.com-华东福彩十五开始| www.776759.com-抚州市体彩中心地址| www.909549.com-福彩快三投注模拟器| www.jg68.com-足球彩票怎么兑奖| www.180184.com-易彩快三大小单双| www.245260.com-易彩堂官方网址| www.317369.com-七乐彩玩发-| www.381761.com-点击进入精彩内i容| www.727039.com-乐彩网是不是骗人的| www.629879.com-彩票数字规则| www.758479.com-举报彩票网站有奖| www.lz93.com-足彩皇冠app| www.9nv.com-赛果开奖彩客网| www.87im.com-体彩购买技巧| www.af4.com-河北体彩开奖| www.us28.cc-幸运快三怎么分大小| www.837538.com-立彩佳美缝剂多少钱| www.22639.com-赛车3-gcp彩票|