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.32ka.com-福利中奖彩票怎么看| www.091273.com-百姓彩票登录| www.536078.com-中国足彩第一网| www.gn57.com-时时彩后二跨度技巧| www.002285.com-七乐彩中奖票样| www.193885.com-湖北快三跨度图表| 凤凰彩票网www.558738.com| www.651854.com-福彩大乐透双色球| www.224563.com-快三直播间-| www.323000.com-马来西亚福彩3d| www.431972.com-福彩公告结果| www.530025.com-7500乐彩网-| www.605530.com-海口七星彩几等奖| www.2209.top-福彩3d神姐断组| www.02361.com-彩票中奖去哪领| www.542828.com-绍兴玲珑湾彩票| www.347511.com-彩厍宝典下截| www.tn42.com-淘彩票大发快三规律| www.962931.com-福彩3d图迷-| www.48366.com-足球竞彩软件排行| www.026113.com-有哪些私彩老平台| www.114532.com-黑彩平台怎么盈利的| www.422600.cc-福彩体彩y销售网点| www.864168.com-凤彩网官方网站| www.y45.xyz-西安福利彩票号码| www.284085.com-一种颜色算不算彩色| www.922297.com-易约约彩下载| 中彩网www.71233g.com| www.862707.com-在网上买彩票犯法吗| www.955122.com-500彩票辅助投| 天天乐彩票www.618393.com| www.nm4.com-五分快三走势图大全| www.629102.com-彩色激光复印机a3| www.803666.com-彩票软件8816| www.909722.com-玩彩独胆王-| 99彩票www.223268.com| www.275822.com-时时彩做庄天天亏| www.142478.com-彩八彩票黑钱怎么办| www.740044.com-福利彩票有哪些号码| www.887949.com-赛马赛果及派彩| www.986273.com-足彩网胜平负| www.da44.com-盛兴彩票网手机v1| www.675995.com-家彩网独胆双胆预测| www.43ho.com-有鸿彩直播吗| www.836752.com-精彩彩票网-| www.942205.com-体彩6-| www.998954.com-客哥说彩3d-| www.70326.com-彩票打印机一体机| www.954119.com-网上安全购彩软件| 500彩票www.50080k.com| www.57728.com-彩票网易分析| www.489271.com-彩票网上代理怎么做| www.366659.com-彩铅混色教程| www.507583.com-乐彩大乐透论坛| www.596165.com-3d彩票报纸-| www.683870.com-中奖彩票图片大全| www.781225.com-彩虹图片手绘| www.901449.com-福彩旗下快开型彩票| www.978915.com-河南快三怎么追号| www.gz57.com-上上海体彩-| www.d38.com-彩票查看结果| www.57zw.com-澳彩即时赔率| www.1104.vip-七乐彩今天出什么码| www.005462.com-45111彩民论| www.0516.in-今曰体彩排三试机号| www.282598.com-时时彩五星长杀条件| www.368315.com-七星彩百度云资源| www.493528.com-人人彩靠谱吗| www.567412.com-中彩网广东-| 13e彩票www.235035.com| www.314120.com-足彩比分手机| www.bw59.com-河南快三赔率表| www.122976.com-彩虹计划网-| www.lm59.com-二元彩票手机网| www.k49.org-诺亚彩票可靠吗| www.32lh.com-快三下局蓷选| www.86bx.com-福彩3d村杀码| www.5297.biz-江苏体彩排五号码| www.21547.com-七天彩co-| www.67844.cc-网赌彩票被黑怎么办| 亿彩堂www.87668g.com| www.qt94.com-湖南于海彩票事件| www.006.date-吉林快三押注平台| www.631080.com-云彩图片-| www.731010.com-梦想彩票站用户注册| www.839008.com-山东彩票双色球开奖| www.915381.com-淘宝彩票可以买了吗| www.949863.com-大彩网走势图首页| www.wz.cc-湖北快三倍投器| www.266122.com-取消彩票高频游戏| www.393227.com-今日彩票天将结果| www.389219.com-福彩3d大神群| www.773705.com-时时彩单式做号技巧| www.399623.com-下载sk彩票app| www.511752.com-彩票开奖查询任五| www.607028.com-江西福彩时时彩开奖| www.680609.com-彩网走势图-| www.774419.com-篮彩竞彩篮球| www.866761.com-腾讯分分彩官网开奖| www.946971.com-彩色混凝土制作方法| www.997329.com-利彩工具3d走势图| www.ha86.com-大发彩票下载| www.7tr.com-彩票挂机高级倍投| www.591511.com-新橙博彩靠谱吗| www.62.cx-玩儿彩票-| www.10158.com-微彩平台app下载| www.92392.com-蓝月亮彩票-| www.126090.com-湖北有哪些彩票网| www.143157.com-体彩大乐透模拟选号| www.92190.com-竞彩的发展形势| www.453653.com-竞彩足球258比分| www.591543.com-三度白菜论精彩打造| www.660035.com-福彩3d心水网站| www.422299.com-凉凉彩铃下载| www.674713.com-万通彩票网站| www.cp166.cc-湖北快三害人| www.4779.org-彩虹六号为啥禁播| www.01174.com-注册送c彩金58元| www.53508.com-腾龙时时彩工具| www.89841.com-彩票站销量下滑| www.039369.com-华彩彩票是怎么事| www.2297.pw-丹东麻将去彩杠是啥| www.7890.cc-四川省中国体育彩票| www.25526.cc-彩票最新开机号| www.34175.com-保定市福彩中心在哪| 500彩票www.50052t.com| www.196703.com-体彩开奖查询结果| www.372962.com-彩经网软件下载| 中国福利彩票www.08588n.com| www.5418.net-彩钢瓦安装人工价格| www.290792.com-体彩江苏十一选五| www.34oi.com-彩票计划软件定制| www.756251.com-7星彩直播开奖结果| www.929300.com-七星彩几个号有奖| www.ae63.com-手机彩票网下载| www.56742.com-嬴彩票-| www.fh55.cc-什么彩票平台最安全| www.3so.cc-做彩票软件销售| www.0245.vip-众乐彩票靠谱吗| www.015021.com-鸿运彩票是真的假的| www.ay56.com-彩票开奖查询彩票l| www.go44.com-河南彩礼-| www.329191.com-彩票白菜免费送彩金| www.184831.com-精彩十分走势图网站| www.998006.com-众彩网专家火烈鸟| www.ul32.com-福彩乐彩网3d| www.227571.com-北京市福彩快3助手| www.091048.com-网上易盈彩票靠谱么| www.179308.com-江苏快三可靠吗| www.8938.org-乐玩彩票提款| www.65119.cc-竞彩网nba-| 幸运彩票www.673066.com| www.383874.com-时时彩代码接口调用| www.761799.com-288彩票金管家| www.872347.com-体彩跟福彩哪个更假| www.886286.com-古风彩铅手绘女| www.958106.com-生日号买彩票| www.vz35.com-人人中彩票官网下载| www.718596.com-夸人的彩虹屁| www.789238.com-足彩博彩技术| www.859971.com-360度快三计算器| www.913619.com-ag彩票平台-| www.968654.com-华盈彩票平台| 500彩票www.202314.com|