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.012466.com-彩经网河北快三开奖| www.598608.com-七星彩的号码| www.067942.com-靠谱的彩票平台源码| www.201851.com-易彩票app下载| www.711951.com-彩礼是什么时候给| www.898293.com-彩票代理如何拉玩家| www.531510.com-买nba篮彩交流| www.337116.com-中国福利彩票五等奖| www.136902.com-吴江彩票店转让| QQ彩票www.89894t.com| www.17gk.com-上益彩-| www.945.la-黑客进入私彩票系统| www.0702.wang-福彩站点申请| www.xn52.com-2005七星彩开奖| www.555695.com-竞彩经验与技巧| www.108506.com-彩影抠图-| www.20kb.com-胜负彩19006| www.925587.com-当彩票打票员累死了| www.132101.com-政府限制彩礼| www.947914.com-福利彩票代打兼职| 彩票5www.199301.com| www.111786.com-彩票注册送39| www.0034.pw-彩票7位数开奖| www.612395.com-彩票预测万彩吧| www.6ls.cc-彩票开奖领奖的人| www.1340.wang-七乐彩复式投注缩水| www.180270.com-快三精准计划| www.062792.com-小米彩票官网首页| www.136701.com-福彩提成怎么算的| www.302458.com-甘肃快三走势图今| www.579540.com-005彩票官网| www.610729.com-凤凰错阿彩-| www.cai0155.com安徽快三开奖结果| www.ud54.com-福利彩票开奖几点| www.50rz.com-福利彩票什么时间开| www.2508.website6彩开奖结果| www.558337.com-海洋彩铅画-| www.368808.com-长沙体彩代理| www.713681.com-王者彩票怎么玩| www.869721.com-49彩票集团怎么样| www.1925.wang-深圳体彩管理中心| www.l41.cc-财神彩票是真的吗| www.801053.com-皇都彩票怎么样| www.965734.com-彩神8ios下载| www.a81.xyz-977彩票网页版| www.2847.cn-彩虹糖蓝色什么意思| www.5671.top-日本彩票兑奖| www.124160.com-安徽快三遗漏统计表| www.213661.com-赢彩神专栏-| www.331634.com-彩票热冷号是什么| www.619970.com-体育彩票邓家| www.303564.com-好彩网3d图谜| www.230053.com-北京快三多少期结束| www.131096.com-环彩彩票-| www.219945.com-旺彩预测电脑版下载| www.553636.com-竞彩比赛夭折怎么算| www.558730.com-时时彩怎么做计划书| www.671126.com-体彩排列三风采网| www.758969.com-吉林快三庄家胜率| www.853382.com-体育彩票春节停售| www.928365.com-福彩网上投注站申请| www.985082.com-竞彩赚金被关停| www.ig64.com-多邦福彩3d-| www.c21.tv-小财神彩票推荐号| www.41oc.com-澳洲5分彩技巧| www.668.date-永利彩票服务器| www.4805.cc-怎么破解新快三| www.018173.com-三国杀星彩-| www.246654.com-重庆快三开奖查询| www.59er.com-竞彩足球推荐微信群| www.44588.cc-福建体彩36+选7| www.456104.com-星际彩球游戏| www.156313.com-彩票号码计算| www.274513.com-腾讯5分彩网址| www.355022.com-福彩去哪里买| www.736912.com-大众彩票网每日首充| www.879027.com-时时彩买单双技巧| www.981303.com-竞彩官电脑版| www.28348.com-福建体育彩开奖| www.139609.com-竞彩外围亚盘app| www.713588.com-天天赢彩票与你同行| www.831144.com-日本买彩票-| www.062151.com-大发彩票是真的吗| www.092228.com-一分彩是假的吗| www.927892.com-台湾彩票-| www.984981.com-体彩足球比分直播| www.374821.com-怎样注册网上买彩| www.502612.com-类似口袋彩店| www.42.cn-668彩票网专业| www.82uh.com-3d牛彩网官网| www.4648.cm-每天2元买彩票| www.26385.cc-福彩3d今日开机号| www.37819.com-彩票赢家网-| www.148068.com-体彩大赢家app| www.276010.com-福建体彩31选7| www.356740.com-彩票3d周易独胆王| www.49zr.com-凤凰竞彩专家预测| www.e28.cn-众彩网黑蝴蝶| www.as.com-内蒙快三一定牛预测| www.988.xyz-天下彩票开奖直播| www.34148.com-p3双彩图谜-| www.790583.com-彩票模拟摇奖器下载| www.892098.com-k彩平台手机登录| www.25jd.com-华彩的意思-| www.503707.com-百世彩票合法吗| www.631501.com-好彩头公司电话| www.31349.com-老梁揭秘彩票文字版| www.1222.live-跟神彩奕奕类似的词| www.8905.cn-竞彩多久能兑奖| www.71744.com-今年的彩票是多少号| www.240900.com-快三彩票奖金是多少| www.800976.com-上海快三查询表| www.906086.com-怎么安装福彩3d| 500万彩票www.35155j.com| www.nm95.com-奥客彩竞彩比分直播| www.599609.com-彩票可以折叠吗| www.757458.com-团队计划购彩| www.998554.com-北京福彩中心新地址| www.152154.com-竞彩足球怎么玩能赢| www.53228.com-时时彩流水-| www.905422.com-快三手机投注时彩| www.961475.com-福彩奖金计算| 500彩票www.642977.com| www.21737.com-买彩票诈骗案例| www.qz6.cc-体彩e球彩开奖结果| www.14rs.com-竞彩专家推荐号码| www.557144.com-福利彩票副主任| www.851008.com-大发时时彩五星玩法| www.119034.com-竞彩5oo比分直播| www.29083.com-福彩第三版-| www.515759.com-安徽彩票冒领案| www.579277.com-百万彩彩票登录| www.636351.com-彩虹上的小雨滴儿歌| www.689322.com-山东福利彩票群英| www.756206.com-旺彩双色球缩水软件| www.821178.com-时时彩大牛在线计划| www.879588.com-多乐彩遗漏-| www.934226.com-福彩动物总动员| www.978738.com-彩票巴巴app下载| www.155.hk-雨后彩虹一类的网名| www.602616.com-腾讯一分彩开奖记录| www.673133.com-怎么找附近的彩票站| www.739279.com-内一排三蒙快三| www.794713.cc-彩票巫师-| www.861082.com-天津寸时彩开奖号码| www.914866.com-彩神不让提现| www.962596.com-跑马彩票全天计划| 皇家彩票www.hj9668.com| www.086879.com-七乐彩单式-| www.42ho.com-七彩九尾狐符号| www.535338.com-六位数彩票-| www.kp75.com-新浪彩票网手机版| www.212283.com-优信彩票大发三| www.273544.com-买3d彩票-| www.ty50.com-彩票高手怎样买彩票| www.40gw.com-体彩七星彩奇偶| www.562017.com-彩票平台套利合法吗| www.93is.com-希腊十分彩票| www.8762.org-七星彩大数据分析| www.md42.com-好运彩彩票官网| www.1688.bid-浙江体彩6-| www.646056.com-彩票大发玩法| www.787899.com-彩票手机版哪个最好| www.852082.com-七星彩1759期头|