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天

知道了
彩01彩票 www.18263.cc-中国福利彩票36选| www.061389.com-中华彩票官方网站| www.448660.com-全能彩票软件| www.566793.com-3甘肃快三开| www.676360.com-福建莆田彩礼| www.761357.com-三星镇好彩妹| www.858614.com-竞彩串关计算方法| www.950217.com-查互联网销售彩票| 亚洲www.938904.com| www.498377.com-大发日立彩票| www.598901.com-福彩35期中奖号码| www.719326.com-双色球彩票开奘结果| www.822595.com-福彩app能买彩票| www.919849.com-高仿彩票机出售| 大赢家彩票平台www.001059.com| www.ky06.com-江苏快三能玩不| www.315.vip-免费领彩金足球彩票| www.480699.com-福利彩票-百度| www.585642.com-01cp彩票官网| www.967124.com-体育彩票抽成| www.422251.com-本站彩票-| www.654492.com-福彩销售排名| www.463605.com-天天好彩资料| www.08803.com-微信推荐福彩号码| www.72337.com-cy335彩运网| www.397714.com-点击彩是假的吗| www.m81.site-体彩竞彩输了很多钱| www.501126.com-希腊三分彩开奖时间| www.603271.com-福彩线上投注| www.696785.com-下载竞彩网-| www.782888.com-卓易彩票官方网址| www.858928.com-今日福彩体彩开奖号| www.481004.com-和彩印内容-| www.667388.com-内蒙古彩票发行中心| www.32981.com-彩票网点-| www.9589.cc-福彩店如何经营| www.60311.com-贵州体彩软件下载| www.2876.top-推广彩票代理加盟| www.17257.cc-足球彩票下载安装| www.71192.com-快三开挂作弊软件| www.419937.com-彩票投资人-| www.272778.com-快三号码表图片| www.610195.com-投诉彩票777网站| www.836383.com-至尊彩江苏快3注册| www.657928.com-彩票点中大奖| www.591615.com-2019澳门博彩展| www.705568.com-彩票怎么兑奖啊| www.801035.com-今日银海彩票工作室| www.913523.com-彩客网ios客户端| www.979464.com-龙彩票-| www.kz71.com-澳门彩票种类| www.42uj.com-怎样算彩票号码| www.025540.com-极速彩票有什么规律| www.757248.com-工地彩钢围挡多少钱| www.11744.cc-彩乐乐双色球基本图| www.48621.com-职业彩票生活| www.cai5055.com快三开奖玩法| www.cp5058.com-上海快三开奖一定牛| www.92133.cc-彩票保安区-| www.121450.com-彩票微信计划群导师| www.189394.com-河北快三术语| www.254860.com-重庆7时彩开奖结果| www.293297.com-彩票中奖查一下| www.365659.cc-竞彩足球总进球| www.450450.com-288彩票里的快三| www.660585.com-360足彩竞彩混合| www.781546.com-多宝彩票平台登录| www.956297.com-高屏彩-| www.25439.com-彩虹的名字含义| www.if54.com-福彩3d奖励规则| www.033755.com-彩乃奈奈番号封面| www.f39.club-乐彩bbs-| www.520012.com-彩票预测师-| www.649338.com-彩博888资料| www.nb28.com-彩票店坐庄-| www.33kg.com-快三中三不同多少钱| www.5871.wang-江西彩礼多少钱| www.34829.com-微信能玩快三吗| C9999www.318548.com| www.09kf.com-彩票平台源码妙招| www.m06.com-2345彩票骗局| www.72803.com-延吉彩票站出兑| www.824048.com-南京三彩折扣店| www.637882.com-七星彩自动画规| www.720365.com-体彩七星彩的买法| www.040647.com-博彩业推广是干什么| www.iq59.com-中国福彩中心| www.05nh.com-七星彩走势图连线图| www.568436.com-福彩3d断组计算| www.041112.com-打工妹买彩票中千万| www.8304.org-福利彩票时间| www.561509.com-快三技巧规律吧| www.663835.com-新版时时彩平台源码| www.896881.com-手机彩票挂机平台| www.py86.com-新时彩app-| www.bk34.com-038彩票-| 彩天下www.c1395.com| www.851417.com-足彩彩客网计算器| www.65313.com-2019好彩一推荐| www.22277.com-时时彩高手实战技巧| www.280417.com-91计划网时时彩| www.0491.cn-京东进军彩票| www.171879.com-快三高手教学| www.954576.com-国外彩票平台有哪些| 大赢家彩票网www.83033z.com| www.jx65.com-彩票倍投陷阱| www.gf3.cc-六星彩开奖公告| www.tj6.com-江西快三走势图表i| www.to01.com-77彩票-| www.0310.cn-pk彩票是合法的吗| www.812515.com-123彩票安卓版| www.893106.com-彩万宝软件-| www.957100.com-彩票能破解吗| 乐彩www.le53.com| www.055228.com-带彩票的成语| www.746183.com-自助彩票-| www.810522.com-盈彩彩票钱提不出来| www.881893.com-京彩彩票是真的吗| www.951279.com-彩票体彩排列五| 盛大彩票www.ca2932.com| www.ew39.com-彩神靠谱吗-| www.320540.com-百变王牌百宝彩| www.875059.com-顺盈彩票平台怎么样| www.962054.com-360彩网-| 500彩票网www.611026.com| www.ol53.com-模拟竞彩-| www.731437.com-重庆福彩自助服务| www.6146.cc-七星彩基本走势图图| www.339629.com-山西省中国福利彩票| www.537389.com-彩9彩票邀请码| www.668510.com-免费彩票统计软件| www.748380.com-红彩会手机版登陆| www.833347.com-成都口袋彩店二维码| www.5249.xyz-七号彩票app| www.72dp.com-彩票中大奖是命吗| www.59570.com-需要彩票代玩工作| www.xp.cc-广西快三开奖结果控| www.356729.com-和彩这个词对吗| www.762173.com-竞彩平台14场| www.862678.com-大发彩票软件| www.927511.com-彩票一共几个数字| www.998106.com-竞彩足球容错怎么买| www.ji17.com-发彩网有人用过吗| www.493706.com-时时彩平台建设| www.901110.com-3d彩界小少爷独胆| www.962051.com-手机体彩安全吗| 名门彩www.33997k.com| www.14bw.com-好彩3开奖结果今天| www.237664.com-精彩十分有几种玩法| www.776417.com-福彩3d结果今天| www.646644.com-足彩亚盘技巧口诀| www.023968.com-买足彩是赌博吗| www.841605.com-福彩内部人员骗局| www.950953.com-三分时时彩app| 彩票大家乐www.21202z.com| www.dd08.com-三分快三计划稳定| www.qi07.com-广东福彩好彩1详情| www.018466.com-福彩d排三开奖结果| www.127305.com-彩铅画花草-| www.195476.com-河南省快三走势图一| www.555514.com-神采奕奕的彩的意思| www.386045.com-瑞彩祥云彩票是正规| www.252685.com-三d彩票预测| www.317289.com-广西快三网易彩票|