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.gx60.com-鸿彩辉腾团队合法吗| www.701516.com-c59彩票网-| www.818479.com-福利彩票分几等奖| www.626440.com-福彩3d小号走势| www.39257.com-重庆福利彩票十分钟| www.329390.com-宝贝计划彩票软件| www.483851.com-正规彩票αpp| www.640478.com-01彩票苹果版| www.561342.com-彩票分析计划师| www.41388.cc-福彩3d专业玩彩| www.93079.com-499彩票-| www.062244.com-福彩双色球领奖规则| www.140856.com-海南七星彩彩版专区| www.y01.me-体彩数字3查询| www.40im.com-做彩票分析违法吗| www.905911.com-甘肃体彩app下载| www.369218.com-买彩票上瘾怎样戒掉| www.451555.com-淘彩票怎么注册| www.391232.com-飞腾彩票是陷阱吗| www.op05.com-最权威的彩票网站| www.3658.biz-每周五开奖的彩票| www.097378.com-中彩票蒙面-| www.627117.com-几个天天彩票| www.576147.com-体彩组六七码遗漏| www.693121.com-山东彩票手机投注| www.799309.com-福彩钱庄-| www.71374.com-中国体彩500| www.680781.com-怎样戒掉买彩票| www.188514.com-爱彩乐官网-| www.458198.com-今日福彩三的字谜| www.843880.com-体彩专管员困境| www.963524.com-1号店彩票-| www.s87.club-牛彩网彩摘网字谜| www.581753.com-凤凰彩票开奖规律| www.037368.com-彩票预测缩水软件| www.463568.com-七星彩专区-| www.263195.com-陈赫中奖彩票| www.875196.com-彩票亿元大奖故事| www.970262.com-ag彩數據-| www.cp2968.com-彩票托怎么聊天的| www.816872.com-时时彩高手分享经验| www.685052.com-大中华彩票网址| www.767587.com-牛蛙彩票资料3o码| www.862770.com-卖私彩怎么判刑| www.954837.com-瑞彩祥云客户端| www.cx02.com-福建快三吧-| www.69413.com-乐彩28-| www.876789.com-体彩官网哪家卖得好| www.4yr.com-三d胆码彩易网| www.1789.cc-高频彩有假吗| www.00534.com-快三一注-| www.947800.com-体彩公益金管理办法| www.8ja.com-爱彩国际有听说过吗| www.99ol.com-竞彩总进球怎么算的| www.5983.top-19013期足彩| www.57861.cc-幸运彩票网真的吗| www.379786.com-体育7星彩开奖| www.555185.com-官方彩票是什么意思| 杏彩www.00840t.com| www.2ay.com-买竞彩最后都是输| www.jv80.com-彩铅画星空简单| www.112877.com-河北快三定牛| www.774473.com-水彩画-| www.655457.com-福利彩票中奖神器| www.237806.com-上海快三开今天结果| www.02888.com-亚彩会平台app| www.388726.com-3d遗漏统计中彩网| www.938651.com-亿彩app在哪下载| www.54ow.com-681彩票-| 众发彩票www.657zf.com| www.221856.com-玩彩票有赢的吗| www.295752.com-查询甘肃快三一定牛| www.568407.com-河北福彩排列七和值| www.2396.org-福利彩票投注站查询| www.2793.top-0567好彩官网| www.57874.com-牛彩3d字迷-| www.37237.com-福彩3d计划软件| www.110171.com-帝皇彩票骗局| www.695914.com-足彩复式投注计算表| www.802632.com-吉林快三统计表| www.893597.com-乐彩网广东十一夺金| www.69to.com-体彩高频彩害人| www.508173.com-七星彩刚才开奖结果| www.580181.com-广西双彩今天开奖号| www.98853.cc-中国体彩几点停售| www.123700.com-彩票带单-| www.972666.com-彩铅眼睛的画法| www.677365.com-怎么进入大盈彩票| www.841266.com-卖60注彩票多少钱| www.192798.com-领彩票没带面具被杀| www.252502.com-体育彩票任五开奖| www.230040.com-快三模板-| www.412969.com-约彩365旧版本| www.8596.shop-情人节送彩票| www.61466.com-福利彩票视频直播| www.054969.com-篮竞彩比分直播| www.397254.com-2月22日七星彩| www.699810.com-彩宝贝诸葛小芸专栏| www.910622.com-福彩时时彩多种玩法| www.6968.gg-重庆市彩983网站| www.866698.com-268彩票网-| www.962128.com-江西福彩助手ios| www.cp5159.com-上海快三是怎么玩的| www.79uy.com-江苏体育彩票图片| www.8937.loan-彩店宝彩官方| www.99628.com-北京单场购彩| www.085038.com-江苏不当彩怏3| www.021271.com-福彩三十选七走势图| www.707957.com-新益恒彩票骗局| www.782038.com-彩票的实际偏态| www.854948.com-福建十一选五爱彩乐| www.910846.com-篮彩竞猜规则| www.960740.com-时时彩送38-| 汇丰彩票www.hf0168.com| www.737933.com-二手彩神uv喷绘机| www.876620.cc-体育彩票真假| www.967451.com-彩票群聊名字| www.072965.com-36元注册玩彩票| www.204511.com-江西福利彩票开奖| www.346198.com-怎样写彩票软件| www.137639.com-體彩-| www.568708.com-好彩头10398| www.kf71.com-360彩票计算器| www.yq93.com-tt快三直播间| 众彩网www.88065c.com| www.604785.com-盛源彩票app| www.50614.com-福彩双色球查询中奖| www.202597.com-贵州福利彩票双色球| www.89471.com-元角分彩软件下载| www.138955.com-优游时时彩平台注册| www.085538.com-时时彩后三定胆方法| www.mp76.com-河北体彩中心电话| www.u21.com-深圳体育彩票机申请| www.66vu.com-菲律宾游彩网| www.272308.com-大乐透彩宝贝| www.686057.com-福利彩票手机下载| www.780837.com-彩客网手机版比分| www.858104.com-福利彩票几点关机| www.85hm.com-飞彩网-| www.488350.com-158彩票计划网| www.q96.me-体彩怎样选号| www.44942.com-最稳定的彩票计划| www.s39.cc-河北快三未出号码| www.29178.cc-博友彩怎么玩| www.590629.com-玩彩独胆王软件| www.459.cn-中国乐彩网-| www.023027.com-时时彩刷流水靠谱吗| www.577790.com-内蒙古快三最新玩法| www.667017.com-彩票公式精算师破解| www.358757.com-彩客网开奖计算器| www.445260.com-时时彩下载| www.539664.com-体彩排列字谜| www.114343.com-澳门买足球彩票| www.9040.xyz-美职篮彩票预测| www.39792.cc-福网彩app下载| www.cd22.cc-快三平投稳赚方法| www.609307.com-彩票开奖修复教程| www.729415.com-吉林快三振福图| www.92xt.com-彩票全能中彩app| www.8974.cm-国彩平台怎样| www.89wk.com-青岛彩票站出兑转让| www.396500.com-c58彩票.cn-| www.794199.com-黑彩算赌博吗| www.884737.com-澳客大乐透彩票网|