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.122449.com-微信代买彩票合法吗| www.4880.vip-全民彩彩票旧版首页| www.48976.com-北京5分pk彩| www.014151.com-玩彩app靠谱吗| www.949810.com-充值10送18彩票| www.lq80.com-吉林快三遗漏一定牛| www.360777.com-3d天天彩图报| www.217620.com-五星彩票是假的吗| www.515469.com-领航时时彩qq群| www.646781.com-极速时时采彩计划| www.776463.com-彩票追号是否明智| www.903801.com-1360亿彩票贪污| 500彩票www.50052g.com| www.899494.com-117彩票网站| www.l85.net-南方双彩走势图大全| www.278985.com-福彩双色球中奖等级| www.122767.com-打彩金违法吗| www.12985.cc-快三开奖记录360| www.1732.win-赌彩票能发才吗| www.44545.com-工地彩钢围挡多少钱| www.981469.com-易彩彩民-| www.yd90.com-韩国金山快三图| www.696484.com-新浪爱彩彩果| www.h00.top-彩宝骗局-| 天天中彩票www.969751.com| www.54864.cc-cc彩球官网-| www.059482.com-168彩票开奖网站| www.909.biz-九宫四柱测彩| www.207372.com-彩票缩水软件| www.345110.com-彩票高待遇招代理| www.757859.com-玩彩票如何才能赚钱| www.1440.me-菲律宾网络博彩| www.324713.com-中国福利彩票副主任| www.373208.com-南京快三多少期| www.93fo.com-什么是彩色一寸照片| www.126557.com-湖北万彩票网| www.869526.com-幸运彩票提现| www.987607.com-彩票倍投计算工具| www.10kx.com-彩票走势图分析秘法| www.061135.com-欢乐彩直播-| www.755232.com-韩国彩票规则介绍| www.865867.com-创世彩票娱乐平台| www.980626.com-海南彩票官方网站| www.me73.com-彩票代理点如何加盟| www.93818.com-瑞彩彩票是真的假的| www.036335.com-飞扬团队金冠彩票| www.5304.org-19038期7星彩| www.8000.me-竞彩2串1投注技巧| www.59269.com-算彩票神器-| www.1688.online怎么用手机买七星彩| www.984066.com-58彩票安卓版| www.rx84.com-分分中彩票官方网| www.1747.org-福利彩票中奖情况| www.266408.com-河北福利彩票网官网| www.529314.com-体彩通吃-| www.443299.com-福彩3d大花猫彩报| www.565553.com-福彩3d双胆推荐| www.813753.com-大连体育彩票微信群| www.el56.com-众彩网专家预测汇总| www.47xj.com-六给彩票香港生肖图| www.02473.com-正规官方彩票购彩| www.496697.com-福彩3d校长原创| www.2685.pw-时时彩能提现出来| www.83937.com-28万彩礼灭门惨案| www.3726.cc-波彩之家网络| www.661988.com-足球竞彩可靠吗| www.743694.com-立彩彩种-| www.816291.com-吉林省福彩快三预测| www.933862.com-彩票和赌博的区别| www.cp0968.com-易彩快三大小技巧| www.733556.com-免费领取彩金网站| www.799830.com-体育彩票开奖玩法| www.874361.com-大发快三和值预测| www.936216.com-彩票平台反水比较高| www.990643.com-手机彩票软件代理| www.pe6.com-吉林快三预测软件| www.120148.com-手机上可以买彩票吗| www.u31.club-速盈彩是什么| www.359520.com-买体彩犯法吗| www.655125.com-够力七星彩安卓版下| www.456815.com-百胜快三好不好考| www.969451.com-福彩3d稳氏应用法| www.th16.com-甘肃省快三遗漏数据| www.680.site-重庆市彩开奖时间| www.15vl.com-9188彩票ios| www.090.cm-新利时时彩是哪里的| www.53686.com-时时彩开庄机器人| www.63zi.com-众彩网怎么赚钱| www.21707.com-彩票复选是什么意思| www.321130.com-中彩网体育彩票排5| www.464674.com-彩票店兑奖规定| www.12571.com-时时彩大小有规律吗| www.061079.com-可靠的购彩app| www.14050.cc-昨天晚上竞彩比分| www.983415.com-彩16c官网下载| www.u65.cc-竞彩足球比分针算| www.9569.shop-彩票256有多少种| www.04ou.com-彩铅画儿童肖像书| www.286845.com-快三带线走势图| www.798522.com-彩票中奖如何兑奖| www.877403.com-彩票怎么猜号| www.942287.com-内蒙休彩11选5| www.987506.com-彩票追号投注计算器| www.bu95.com-福彩快三推荐号专家| www.wb89.com-福彩快3速查表| www.611.live-北京时时彩预测软件| www.519899.com-快三能买跨度吗| www.288355.cc-网赌快三下大就输| www.646505.com-彩票开奖有谁知道| www.019186.com-49彩票集团是| www.978649.com-易彩票app官方网| www.3819.in-七星彩数字神奇组合| www.57582.cc-澳客赢家彩票客户端| www.696378.com-霸主彩票咋样| www.808895.com-任选九场竞彩网| www.901436.com-玩彩老头排列三| www.993328.com-怎么玩彩票挣钱| www.w21.org-微信大发快三群最近| www.938971.com-澳客彩票预测| www.996043.com-北单开奖彩客| --手机彩膜批发| www.069587.com-福彩3d跨度号码表| www.337477.com-申请就送彩金的平台| www.12lu.com-福彩和尾走势图| www.39yn.com-巨丰彩票网址是多少| www.319872.com-2019彩库宝典| www.383705.com-福彩哪个台-| www.932043.com-福彩主任事件| www.965465.com-大连福彩中心官网| www.88442.com-uk彩票-| www.1628.site-kk彩票下载-| www.858812.com-彩29彩票安卓版| www.967224.com-彩票两句顺口溜| www.k32.net-3d彩民乐精华版| www.3222.cc-彩八为什么下载不了| www.01ae.com-彩虹的形成原因| 中彩网www.6661d.cc| www.39qg.com-七星彩中前四个| www.098219.com-百度乐彩3d走势图| www.373701.com-福建体彩大星走势图| www.660693.com-体彩怎么看是否中奖| www.958904.com-吉林快三购买技巧| www.vr45.com-福彩开奖3d试机号| www.026423.com-红牛彩票快三计划员| www.325844.com-彩店宝跑了-| www.185401.com-博牛彩票下载| www.604559.com-彩帝彩票下载安装| www.668277.com-福礼彩票双色球| www.721338.com-彩宝网首页网页版| www.786069.com-大乐透福利彩票官网| www.840466.com-足彩赔率规律| www.896756.com-基诺型彩票的漏洞| www.950712.com-体彩排列三必下胆码| www.986490.com-怎么网络刷彩票赚钱| www.io9.com-快三内蒙古走势图| 众盈彩票www.77996d.com| www.4841.cn-快三作弊软件视频| www.203654.com-彩票有哪些玩法| www.345119.com-体育彩票网红店| www.561105.com-福利彩票最大阵容| www.681164.com-彩票榜手机app| www.804756.com-彩虹旗论坛进不去| www.994348.com-彩票投注网站排行榜| www.91wr.com-竞彩单注多少钱缴税|