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.831350.com-中国福利彩票主任| www.gq01.com-晚晚好彩开奖号码| www.1254.top-重庆时时彩讨论群| www.69107.com-体育彩票站怎么赚钱| www.404975.com-头彩彩票-| www.976676.com-焦作结婚彩礼| www.338647.com-多金喜彩票-| www.520255.com-乐喜彩票网站的托| www.667483.com-武汉福彩中心地址| www.887312.com-亿发彩票是不是骗局| www.149152.com-彩票888下载| www.595028.com-乐彩uv卷材-| www.95119.com-中国福彩票官网| www.52671.cc-吉利彩票app下载| www.089131.com-快三杀号专家最准确| www.225479.com-3d福彩开奖-| www.030008.com-福彩购买平台下载| www.215952.com-劬力七星彩奖表| www.333442.com-彩票中奖赠与父母| www.516493.com-彩票47-| www.664580.com-七乐彩走势图500| www.481327.com-3d彩民乐精华图| www.028208.com-彩票软件怎么做| www.222634.com-快三过滤器-| www.508665.com-三宝生活体彩真假| www.681228.cc-福彩带连线走势图| www.995862.com-竞彩ios下载| www.pz60.com-9彩计划pc-| www.468678.com-明天彩票开奖| www.883748.com-网络彩票黑客| www.ip24.com-足球竞彩比分直播| www.009882.com-重庆时彩-| www.993208.com-彩票那个容易赚钱| www.vz79.com-彩票美女宝贝开奖图| www.3004.cm-时时彩中三后三计划| www.32642.com-江苏体彩19036| www.89ea.com-竞彩九串一-| www.484477.com-人人中彩票刑拘| www.117249.com-七星彩走势图规律| www.85019.com-七星彩走势新浪财经| www.161107.com-网上福利彩票app| www.567582.com-彩票中奖发的朋友圈| www.660044.cc-腾讯分彩是什么| www.742552.com-好运彩下载-| www.838397.com-什么是快3彩| www.3tz.cc-云上凤凰彩票靠谱吗| www.205808.com-彩票计划软件哪个好| www.537302.com-春秋彩票有反水吗| www.691665.com-彩乐彩票官方网站| www.875820.com-88彩票手机官网| www.970042.com-中国体彩官方微信号| www.cai7077.com贵州快三跨度走势图| www.qo55.com-易彩快三可靠吗| www.104677.com-足彩竞彩直播| www.280094.com-时时彩是正规官网| www.127949.com-彩虹抖音翻唱| www.85345.com-七星彩30期走势图| www.108156.cc-福彩近十期开奖号| www.20001.com-大红鹰彩票网欢迎你| www.5570.cn-3d福彩和值表彩图| www.981225.com-彩冰淇淋视频| www.qn70.com-福彩快3几点结束| www.0865.cm-福彩怎么扫码兑奖| www.bg77.com-彩票计划是不是骗局| www.8674.com-七星彩杀头尾准确| www.88377.cc-出彩啥意思-| www.086888.cc-彩富彩票正规吗| www.188103.com-北哀快三-| www.652971.com-彩虹pk10计划| www.800494.com-福彩3d地图库| www.899116.com-足彩十四场规则| www.959740.com-顶尖彩票平台合法吗| 七天彩www.00665.com| www.gy06.com-福利彩票快3呀| www.r49.net-微信提现彩票| www.714946.com-大发彩神争霸| www.849951.com-qq分分彩投注网站| www.275279.com-香港快三是什么| www.072856.com-新亿彩票官网| www.47yk.com-今天彩民乐图库| www.399711.com-周三的彩票-| www.561478.com-网络彩票赌博安全吗| www.662057.com-头头博彩是黑网么| www.799914.com-安徽快三计划团队谁| www.876.red-彩铅儿童画基本功| www.89852.com-c85彩票-| www.307618.com-大发快三假的| www.437237.com-振幅彩票术语大全| www.dv7.com-华夏幸运快三| www.182029.com-福彩快三新规定| www.73176.com-福彩手机购买| www.062781.com-彩票又可以网购了| www.139830.com-网上彩票诈骗报警| www.735206.com-彩票冷热交替规律| www.811737.com-体彩竞彩足球开奖| www.874971.com-快三稳赚不配的方法| www.968151.com-福彩陕西福利彩票网| 大赢家彩票平台www.179223.com| www.835517.com-福彩双色球26期| www.899518.cc-手机彩票平台大全| www.964637.com-完场足彩比分直播| 大赢家彩票平台www.375736.com| www.jg62.com-265彩票app-| www.916767.com-快5彩票玩法| www.989480.com-上海快三彩票投注| www.cl59.com-福彩天地报电子版| www.xp42.com-彩民要求赠送彩票| www.36dm.com-彩票购买支付宝账号| www.0310.me-彩票有黑幕吗| www.7250.pw-彩虹糖小豆机圣诞| www.38557.cc-k彩福民福地测速| www.537663.com-中彩网字谜图谜汇总| www.660827.com-福彩双色球开将结果| www.530620.com-时时彩万能四码| www.595397.com-k彩手机app下载| www.085529.com-五星彩票网址是什么| www.cp3225.com-三分快三违法吗| www.rb13.com-时时彩游戏规则图| www.09fo.com-投诉体彩中心电话| www.0380.org-时时彩技巧| www.5328.top-西雅图彩票app| www.628827.com-极速快三必-| www.695318.com-竞猜彩误差值| www.766643.com-福彩显示器怎么安装| www.833445.com-彩店实体店二维码| www.886963.com-江苏快三爱彩人| www.944401.com-百万彩票网-| www.981228.com-彩色冰淇淋-| 超级彩票www.976506.com| www.je23.com-福彩快三怎么算| www.wp82.com-诺亚彩票是否正规| www.05gc.com-彩铅上色黑笔勾边| www.802698.com-北京福彩兑奖流程| www.870822.com-彩81彩票骗局| www.930179.com-美国彩票中奖概率| www.975940.com-2018林州彩礼| 天下彩www.420689.com| www.df60.com-七星彩复式玩法规则| www.tl59.cc-炫乐彩票二维码| www.299768.com-达人彩票快3| www.635.me-中国福彩十二生肖| www.3963.net-中堂彩xyxcc| www.8162.vip-立彩快三赚钱| www.7733.cm-自定义彩票走势图表| www.15he.com-成都彩票店转让58| www.540210.com-彩票外围是什么意思| www.668117.com-安徽彩礼一般给多少| www.814950.com-球彩怎么看-| www.878878.com-江西省体彩中心位置| www.935868.com-贵州福彩公益活动| www.cx5.com-体育彩票发行宗旨| www.zs71.com-助赢彩票官网| www.0765.cc-福利彩票那几天开奖| www.9484.cc-彩吧神字图库第五版| www.085389.com-网上玩彩票能赚钱吗| www.62182.cc-北京福彩专刊| www.081341.com-高兴彩票app| www.751034.com-九彩彩票-| www.864511.com-人人彩票怎么玩法| www.927075.com-中彩堂正版的资料| www.982038.com-绿翡翠彩票中奖率| www.cp7318.com-湖北快三爱彩乐| www.zn53.com-好彩票苹果下载软件| www.15vq.com-高价彩礼害死人|