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.278253.com-高频彩票害人输千万| www.301817.com-湖北快三湖北快3| www.399512.com-海南七星彩日日升图| www.26237.cc-描写彩虹的好词| www.350718.com-彩色激光打印机推荐| www.517626.com-万豪彩票合法么| www.645764.com-老彩民如何研究彩票| www.771353.com-743cc彩-| www.865585.cc-3d福彩推荐-| www.947203.com-天津福彩二十选八| 网易彩票www.076wy.com| www.911246.com-尼彩手机官网| www.990954.com-彩票欺骗-| www.bm56.com-手机正规彩票网站| www.vg45.com-可靠的彩票平台源码| www.gd42.com-江西省福彩快3| www.567249.com-旺彩双色球怎么买| www.693103.com-跟87彩票店类似的| www.310217.com-今日快三中奖规律| www.284073.com-体彩网名-| www.407855.com-七星彩造假-| www.549118.com-彩票江苏快三怎样买| www.696279.com-重庆实时彩开奖| www.196185.com-爱彩乐5分快3规律| www.591127.com-不给彩礼的男方父母| www.4337.vip-彩票兑换app| 网易彩票www.36788k.com| www.125431.com-福彩公益行是真的吗| www.288820.com-快三中了两个号| www.433530.com-唏关彩资料-| www.159664.com-全天三分时时彩计划| www.7488.wang-体育彩票开什么号码| www.1973.xyz-河南帝彩快3真假| www.297950.com-快三数值表-| www.389364.com-东莞长安福利彩票店| www.502652.com-多彩投怎么样| www.570909.com-搜神传好彩妹| www.655610.com-七星彩买礼物| www.741007.com-澳门彩票是什么玩法| www.170852.com-彩票123app-| www.8856.org-乐彩网合买大厅| www.732697.com-快三和值18计划| www.831065.com-好彩乐-| www.539443.com-彩票貪污案-| www.700512.com-3d彩迷-| www.805576.com-彩铅画花简单| www.896897.com-周口彩票店转让信息| www.974103.com-环球彩票不能提现| www.cp9737.com-快三计划追号盈利表| www.ut39.com-90彩票大厅-| www.2179.wang-七彩影城爱建店影讯| www.069013.com-王者彩票大发快| www.169202.com-甘肃快三1000期| www.366066.com-足彩竞彩计算| www.745898.com-e彩堂合法吗| www.815152.com-3d福彩开式号| www.315680.com-彩虹7号游戏图片| www.061788.com-彩票什么叫复式单式| www.306.hk-领航时时彩qq群| www.600844.com-每期买多少钱的彩票| www.4161.top-七彩云乳业有限公司| www.0234.top-赢赢彩票-| www.151674.com-彩票翻倍计算器| www.100064.com-百宝彩视-| www.488543.com-双色球乐彩彩园下载| www.639854.com-东方亮彩副总离职| www.761532.com-梦见打彩票-| www.r34.win-香港快三下什么软件| www.81iy.com-新彩网排三试机号| www.0929.net-彩票站合买-| www.8599.site-彩宝贝网彩票工具| www.ev89.com-彩票赚钱软件| www.n08.cc-黑彩平台10大平台| www.88mg.com-七彩捞腌菜辅助器| www.2498.vip-l天天彩票与你同行| www.8004.vip-打地鼠游戏教案彩虹| www.103058.com-乐和彩网址-| www.206761.com-彩票106cc苹果| www.307162.com-七星彩19039| www.397072.com-v8彩票平台怎么样| www.41um.com-体彩快乐扑克奖金| www.732917.com-众彩生活app新版| www.840588.com-山西体彩中奖规则| www.948011.com-双色球中彩网一擂台| 乐博彩票www.063911.com| www.lb77.com-234彩-| www.4214.me-七彩格子曝光| www.54if.com-精彩分享平台| www.623561.com-大乐透彩票分析软件| www.309520.com-附近福利彩票站| www.216857.com-甘肃快三预测号| www.364989.com-阳光彩虹小白马原唱| www.496149.com-必威体育博彩| www.597873.com-昨天足彩结果查询| www.690418.com-重庆竞彩网是真的吗| www.762170.com-时时彩有没有人控制| www.900770.com-福彩7乐彩开奖公告| www.975957.com-环彩彩票-| www.qm.cc-安徽快三一定牛网| www.861286.com-江苏体彩任选3| www.8360.link-霞光溢彩是啥意思| www.7283.loan-儿歌彩虹-| 亿龍彩票www.1368l.cc| www.144626.com-湖北快三奖结果| www.694141.com-中国彩票中心下载| www.470509.com-竞彩中奖后扣多少税| www.855625.com-北京快三多久一班车| www.992640.com-足球博彩高手心得| www.8238.wang-聚彩app下载安装| www.855928.com-c45彩票下载安装| www.85ch.com-三d新彩三d新彩吧| www.301262.com-天下彩万彩吧资料| www.025071.com-亿乐彩下载app| www.548419.com-107彩票下载安装| www.769071.com-3d选号彩报18年| www.846663.com-彩票改规则-| www.911888.cc-天天彩票网开奖结果| www.977946.com-宝马彩票平台怎么样| www.cf23.com-江苏快三有官网吗| www.ta82.com-贏彩票-| www.01ek.com-羽泉彩虹吉他谱g调| www.972933.com-彩虹授权商多少钱| www.338876.com-ss彩票-| www.397563.com-福彩云南快三| www.488208.com-福彩3d预测分析区| www.90tp.com-沁县李彩英演出| www.237604.com-河南体彩网首页| www.872350.com-旺彩app平台| www.948293.com-天齐彩票首页| www.968141.com-最新微信彩票群| www.618923.com-足彩培训师公布| www.k16.biz-体彩贵州11选五| www.629608.com-188彩票手机下载| www.654484.com-全国福利彩票销售额| www.683135.com-彩经网缩水过滤工具| www.qp24.com-快三还有什么技巧| www.1557.in-云彩宝官网-| www.465666.com-旋子彩画手绘构图| www.34134.com-福彩三地谜语总汇| www.273617.com-中国彩票还可信吗| www.92117.cc-顺丰彩票你中了多少| www.e91.cc-中国福彩网开奖时间| www.ur67.com-鸿彩网app-| www.1038.net-爱乐彩云南11选五| www.200079.com-智慧彩系列挂机软件| www.877175.com-秒秒彩平台能作弊吗| www.mm52.com-天天送彩金的彩票| www.b09.org-彩票开奖查询今天| www.99ok.cc-幸运快三推荐码| www.1995.me-足彩二串一如何最稳| www.87593.com-京东买彩票在哪里买| www.286237.com-公益福彩被骗| www.069110.com-彩之星下载专区| www.706872.com-彩软科技官网| www.117845.com-浙江体彩怎么下载| www.375320.com-彩金宏辉翻牌机| www.558143.com-大赢家彩票一分快三| www.90he.cc-谁手机博彩过| www.145943.com-567彩票安全吗| www.343075.com-彩票下载手机版试玩| www.885802.com-彩神百家号-| www.689840.com-福彩三d试机号今天| www.182808.com-广西快三人工计划网| www.860141.com-时时时彩票手机软件|