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天

知道了
彩01彩票 www.sh71.com-福彩3d彩报第三版| www.2336.bid-七彩云南翡翠淘宝| www.nq.com-福彩快三就是赌博吧| www.32ol.com-神圣彩票是骗局吗| www.91176.com-炫彩刮画图片大全| www.221845.com-玩彩票赚钱不上班| www.034993.com-中彩网统计图表| www.648044.com-菲律宾博彩彩票| www.767355.com-山西福利彩票| www.859138.com-田彩芽根的功效| www.931413.com-买彩票中奖法术| www.994205.com-重庆时时彩技术| www.209.cm-简单水溶彩铅画图片| www.mh25.com-福彩、快3app| www.ov80.com-中国福彩开奖双色球| www.598969.com-七乐彩36期-| www.564885.com-福彩杀码定胆方法| www.826363.com-宁夏体彩大乐透中奖| www.c69.club-手机七星彩票| www.087903.com-彩运无线网登录| www.206206.com-怎么做快三彩票网站| www.124218.com-下载彩票走势大全| www.203790.com-彩票500官方网站| www.975523.com-重庆市彩后三走势图| www.dd12.cc-具前景的体育彩票店| www.b13.live-七七星彩吹吹| www.43xo.com-纳彩-| www.0920.com-彩票合买的好处| www.541.bid-高频彩最新规定| www.6560.com-中山体彩网上服务站| www.24253.cc-宝马彩票违法么| www.187268.com-福彩3d开奖号码| www.259957.com-如意彩票-| www.38ml.com-彩票第40期开奖| www.59981.com-皇冠彩票-| www.941233.com-彩票怎么刷流水最稳| 世彩堂www.5854s.cc| www.616037.com-亚洲人肉彩漫图片| www.748012.com-308彩票蛋蛋| www.650765.com-水彩抽象画图片| www.655250.com-易利三分彩全天计划| www.802152.com-省福彩中心投诉电话| www.905451.com-世界杯的足彩怎么买| www.982646.com-彩之星平台-| www.nk24.com-竞彩跟单app| www.13sp.com-广东省福彩26选5| www.968469.com-福彩6十l生肖开奖| www.536157.com-彩票一共几位数| www.636532.com-彩虹四无人机多少钱| www.790232.com-彩吧图库第一版今天| www.25cz.com-华彩的成语-| www.698077.com-杭州市体彩兑奖地址| www.66973.cc-开福彩店怎么盈利| www.055567.com-申请福利彩票店难吗| www.419996.com-955彩票平台| www.608323.com-体彩加盟费多少钱| www.8281.biz-i8彩票网-| www.024250.com-福利彩快三下载安装| www.662705.com-600万彩票平台| www.788441.com-足彩19046分析| www.745221.com-98彩票官方网站| www.845545.com-乐盈彩票正规吗| www.925555.com-旭彩美缝剂厂家简历| www.981045.com-七彩礼品鲜花| www.ov8.com-彩票11选5-| www.377202.com-qq彩票不能用了| www.038804.com-新大陆时时彩走势图| www.72ym.com-乐彩模拟投注器| www.995453.com-易彩诈骗-| www.fr47.com-快三最大遗漏多少期| www.xv13.com-彩票app骗局| www.28ol.com-体彩小辣椒6| www.wp5.cc-吉林市快三开奖结果| www.612793.com-1旺旺彩票-| www.708638.com-福利彩票吧百度贴吧| www.1580.cn-五分快三导师| www.65299.com-炫彩摄影沙龙| www.18867.cc-在998彩票注册| www.025202.com-福彩行业-| www.188121.com-安徽快三购买网站| www.966576.com-足彩指数500| www.ol41.com-福彩种类及规则| www.927373.com-体彩数字-| PK彩票www.623190.com| www.09616.com-广东体彩订票网| www.81199.cc-中国体育博彩业| www.356947.com-彩票中的钱怎么办| www.426124.com-今日体彩全部藏机图| www.520083.com-塘沽的快三秒| www.588879.com-旺彩软件下载ios| www.695737.com-竞彩串-| www.797048.com-赢彩彩票正规吗| www.193562.com-大乐购彩票是什么| www.301.in-1288购彩app| www.4040.pw-彩票3d怪字神贴| www.130594.com-七星彩中奖口诀| www.221353.com-时时彩助手旧版| www.654799.com-东方彩票安全吗| www.752511.com-有什么彩组词| www.826227.com-彩票支票到账时间| www.891306.com-彩票用语飞偶| www.959153.com-快乐十分彩票下载| 福彩www.26878d.com| www.382953.com-体彩样票是什么| www.um7.com-马来三分彩开奖直播| www.00iy.com-以彩虹和画画写段话| www.81ec.com-新彩每天试机号| www.2150.vip-中国彩票分几种| www.00524.cc-金彩网福中网| www.974177.com-福彩都有哪些玩法| www.xw22.com-网上买彩票对实体店| www.4592.xyz-彩票店刷销量| www.81kr.com-北京加盟福利彩票| www.77338.cc-好彩客下载苹果| www.044225.com-彩之家苹果版| www.118430.com-境外彩票网站有哪些| www.345647.com-大豪客彩票官网| www.459876.com-彩排列三杀跨杀尾| www.558865.com-体彩数字最大到多少| www.656973.com-福彩3d质合是什么| www.753773.com-中彩网十分快三| www.853991.com-彩票103安卓版| www.930406.com-快三怎么逮豹子| www.987610.com-彩票万能倍投器| www.cd41.com-黑彩庄有挣有赔| www.470096.com-境外博彩工作犯法吗| www.730203.com-互娱彩票app| 天下彩www.www.396990.com| www.219522.com-数字彩票频-| www.406148.com-手机七星彩投注网| www.266560.com-福彩3d图表-| www.110703.com-3d新彩网首页| www.336695.com-3d彩票的玩法介绍| 乐博彩票www.483864.com| www.c00.org-星彩代刷网-| www.140955.com-app购彩大厅| www.209976.com-足彩网上投注不能买| www.291379.com-鸿彩快1-| www.59639.cc-好盈彩票app下载| www.079557.com-竞彩篮球玩法| www.2621.cc-彩票37-| www.xn78.com-河北快三连线走势图| www.246700.cc-彩票5分快3正规吗| www.875961.com-今日吉林快三开奖| www.8555.wang-彩库宝典2019版| www.071998.com-综艺股份旗下福彩| www.916480.com-破解私彩改写金额| www.nr79.com-乐迎彩票是否合法| www.006380.com-8亿彩手机版下载| www.106953.com-500竞彩足球网| www.96rt.com-彩排英语动词怎么说| www.3197.cn-新浪爱彩开奖| www.89ql.com-浙江快乐彩票12先| www.78098.com-山西福彩3d彩民乐| www.821849.com-乐彩网可以买彩票吗| www.603182.com-天下第彩票开奖结果| www.799810.com-四川福彩领奖规则| www.cp859.com-高手教你玩uu快三| www.609701.com-彩票安卓破解版| www.73zw.com-环球彩票真的假的| www.8809.wang-金福彩票网手机登录| www.220279.com-竞彩足球专家预测| www.406801.com-七星彩8o8长条局| www.681350.com-彩票是网赌吗|