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天

知道了
1分快三 www.54yd.com-玉溪体彩中心| www.055801.com-六位数彩票一直开的| www.10pq.com-中国时时彩票网站| www.826714.com-信达彩票-| www.cp2199.com-北京福彩快3下载| www.0447.vip-四级彩票-| www.553313.com-邯郸体彩站转让信息| www.603691.com-女性梦见买彩票| www.020670.com-乐和彩竞彩官网| www.3112.pw-云南福彩弃奖| www.39285.cc-全福彩app-| www.2727.biz-数字彩开奖结果| www.9432.xyz-中国城彩票-| www.636568.com-彩虹六号现实| www.779355.com-福彩快三寻宝图| www.04128.cc-彩票306是啥| www.870940.com-体彩6+1中奖规则| www.an05.com-uu快3是什么彩票| www.922059.com-彩神安全吗-| www.752311.com-彩虹六号禁播原因| www.944138.com-头条彩票骗局| www.038104.com-犀牛彩票邀请码| www.287168.com-福彩机器转让多少钱| www.503631.com-黑彩平台源码| www.300031.cc-彩要2元走势图| www.ex07.com-快三是坑人的彩票| www.c12.vip-江西快三开奖爱彩乐| www.34sq.com-周三开哪些彩票| www.251776.com-台北快三开奖| www.918590.com-澳门博彩税率是多少| www.573759.com-有人给我发腾讯彩票| www.1915.cc-11145彩民论坛| www.9954.me-排五走势图彩宝网| www.347647.com-彩票软件漏洞| www.53hh.com-福彩3d中奖查询器| www.930.tv-七星彩四个号多少钱| www.71511.cc-河南省福彩中心电话| www.891822.com-安装北京快三走势图| www.055361.com-江西快三彩票网站| www.135512.com-福彩网站下载安装| www.ce45.com-分分快三预测为网| www.984197.com-三d字谜总汇新彩网| www.fx88.com-倍投计算器中彩神| www.e79.cc-福彩30选7结果| www.790706.com-福利彩票随机选球| www.881902.com-福彩刷佣金-| www.953660.com-盛大彩票app| www.qa2.com-惠民彩票骗局| www.303797.com-鑫彩网真的黑| www.520070.com-众彩易购提款可靠吗| www.617169.com-中奖的彩票照片| www.690953.com-总统彩票网投平台| www.770522.com-重庆时时彩被停原因| www.865457.com-重庆分分彩开奖记录| www.929723.com-广州快三-| www.994010.com-彩票足球竞彩怎么玩| www.mo31.com-福彩网快三大小单双| www.31hi.com-全天彩网址-| www.860413.com-好彩香烟价格表| www.934776.com-极速时时彩平台盈盛| 500彩票www.50054f.com| www.90gd.com-沁县李彩英在武乡| www.2771.cc-福彩排三千禧试机号| www.758821.com-买彩票不中奖原因| www.829173.com-九彩app-| www.891675.com-兴盛彩票app下载| www.954865.com-胜负足彩比分| 58福彩www.58fcw.com| www.65304.com-炫彩的意思-| www.4032.cn-吉林快三提前开奖器| www.9242.vip-大乐彩怎么回事| www.973348.com-598彩票网-| www.sd59.com-彩票稳赢平台群| www.028772.com-福彩3d五行图走势| www.235274.com-广东福彩app下载| www.353038.com-七彩票开奖号码查询| www.42sq.com-福彩开奖日期和结果| www.908.tv-买彩票会赚钱吗| www.72899.cc-彩八仙官网安卓| www.040016.com-十分彩网页版| www.443885.com-体彩6+1开奖| www.668056.com-福彩开奖有假吗| www.879346.com-pp彩票下载安装| 网易彩票www.26163t.com| www.6659.me-彩票需要几位数字| www.116395.com-彩票分析师招聘郑州| www.811391.com-搜索福彩开奖信息| www.370969.com-体彩481和值跨度| www.39563.cc-福彩曝光-| www.5722.com-福彩3d玩法及价格| www.170671.com-贵卅快三开奖走势图| www.123925.com-酷彩吧彩票可信吗| www.77224.com-微信网上购彩可信吗| www.20975.com-佰万彩票app下载| www.tr12.com-万博彩票代理的佣金| www.dt27.com-74彩票-| www.468066.com-全国联网非凡彩票网| www.181258.com-内蒙时时彩-| www.289238.com-彩神1app-| www.432886.com-七乐彩彩票7位| www.494605.com-彩77平台可不可靠| www.653812.com-东方娱乐彩票网址| www.cp2011.com-河北福彩快三一定牛| www.174000.com-快三app哪个好用| www.0892.net-中了彩票一千万| www.go22.com-内蒙古彩票快3| www.360666.com-高平彩钢瓦-| www.978690.com-福彩3d2元走势图| www.qp23.cc-广西7乐彩-| www.322944.com-彩票今日开奖| www.826270.com-五星乐彩下载| www.557.red-澳客赢家彩票官网| www.37994.com-棒棒彩票官网| www.567343.com-利彩苹果下载安装| www.610037.com-微信为什么没有彩票| www.709198.com-澳洲彩票-| www.780408.com-体彩18号5d-| www.856127.com-广西快三开奖公告| www.908584.com-安徽快三王-| www.956225.com-今日开什么七星彩| 购彩网www.85gcw.com| www.5163.xyz-35选7彩票-| www.11299.com-足彩对阵表新浪| www.57332.cc-下载网上购彩| www.114018.com-双色球彩神通| www.115350.com-足彩胜负500| www.449163.com-彩票螺旋矩阵算法| www.622113.com-五福彩票平台靠谱吗| www.769895.com-福彩兼职上分| www.915908.com-手机彩票加盟代理| www.974235.com-go彩是什么-| 优彩网www.987423.com| www.639488.com-竞彩怎么拉客户| www.760484.com-陕西三彩集团怎么样| www.866295.com-中国体彩手机在线| www.966801.com-竞彩足球兑奖有效期| www.cp865.com-吉林快三平台下载| www.oc77.com-福彩内蒙快3吧| www.894827.com-赢彩快三怎么玩| www.24024.com-雅彩票-| www.434961.com-彩票代销费-| www.63765.cc-足彩买量比-| www.am85.com-广西福彩选号助手| www.vl61.com-财经频道彩票开奖| www.392243.com-怎么在手机买足彩| www.870567.com-盛大彩票真的假的| www.ut8.com-安徽快三胆拖玩法| www.791754.com-淘彩是正规的吗| 新盈彩www.xinyc5.com| www.tv84.cc-福利彩票快开| www.940431.com-易彩网破解-| 博乐彩票www.35918o.com| www.2661.xyz-福彩快乐十分天津| www.860331.com-中国体育彩票官| www.258108.com-乐米彩票下载| www.97573.com-360老重庆时时彩| www.80tm.com-财富彩票正规么| www.5200.me-彩友汇-| www.81hx.com-乐投彩合法吗| www.5663.net-生肖彩票下载| www.480354.com-竞彩之家注册吧| www.15866.com-体彩中心副主任| 中彩网www.81233p.com| www.049149.com-耽美彩漫肉少爷三人|