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.744147.com-福彩汽车抽奖活动| www.6352.xyz-竞彩猫app破解版| www.570516.com-七彩云南翡翠店| www.732657.com-彩票三地走势图| www.eg60.com-体彩大乐透开奖时间| www.347588.com-彩虹的约定伴奏音乐| www.441224.com-彩票728下载| www.537685.com-颜料七彩色-| www.786165.com-海南私彩头尾规律图| www.897587.com-体彩足球胜平负查询| www.977200.com-彩礼法律规定| www.cp8128.com-易彩快三哪里下载| www.rm39.com-体彩e球彩玩法介绍| www.527941.com-彩争霸-| www.878837.com-江西体彩中心地址| 彩票控www.7777ae.com| www.120653.com-体育彩票竞彩提成| www.400713.com-河内一分彩人工计划| www.4052.win-30d三弟福彩| www.15240.cc-比较稳的彩票客户端| www.6804.vip-福彩3d解迷网| www.781972.com-体彩大乐透开奖结另| www.2tg.com-竞彩足球输了好多钱| www.629058.com-快三12和值-| www.739492.com-头彩票手机版下载| www.835590.com-500彩手机版| www.933697.com-金冠彩票官方网站| 大福彩票www.df39.com| www.19yt.com-自动挂机彩票| www.319782.com-腾讯快三下架| www.cu83.com-彩票站加盟-| www.33080.com-彩票团队导师计划| www.636206.com-云彩厅彩票是假的么| www.935682.com-时时彩定胆稳赢方法| www.0567.cn-福彩老北京双胆| www.289815.com-彩票计划软件免费| www.n70.cc-怎么看彩票-| www.400205.com-在哪里众筹买彩票| www.451627.com-信彩票平台怎么样| www.044825.com-湖北快三和值表| www.77829.com-七乐彩五拖四多少钱| www.909556.com-江苏快三购彩网网站| www.999327.com-e球彩三场全包奖金| www.re53.com-中福快彩-| www.888087.com-爱彩乐最新版本下载| www.963410.com-比较大的彩票平台| 凤凰彩票www.77802h.com| www.fu60.com-彩票计划群里全是托| www.zc37.cc-大发快三的运算公式| www.43675.com-彩宝cb8苹果版| www.57153.cc-武汉休闲快三拉花| www.06602.cc-华彩尚映是个骗局| www.639441.com-彩票站买假刮刮乐| www.167580.com-福彩快3骗局| 汇彩网www.www.hcw266.com| www.800728.com-我要3d牛彩涂| www.912062.com-快三数字分析软件| www.637960.com-体彩升级竞彩申请| www.863634.com-qq手机彩票-| www.442271.com-官彩平台刷鸿博| www.828897.com-偷彩票怎么判| www.713132.com-福彩3d做假-| www.959743.com-盈彩官网江苏快三| www.36bh.com-七星彩2000期| www.655941.com-顶尖的移动彩票软件| www.857377.com-甘肃快三遗漏值| www.437200.com-pcd彩票-| www.555205.com-三分彩走势图怎么看| www.628663.com-好彩1基本走势图| www.707295.com-凤凰彩票时间差漏洞| www.778529.com-牛彩网杀号-| www.009427.com-中彩在线靠谱吗| www.081037.com-体彩怎么申请开店| www.7359.pw-上海市体彩中心官网| www.217048.com-怎么玩省份快三| www.144468.com-首充彩票平台| www.227725.com-网络一分快三假吗| www.298533.com-腾讯彩票幸运大转盘| www.ur.cc-福利彩票官网| www.687017.com-买彩票中奖的感觉| www.799648.com-内蒙快三49期下载| www.908833.com-发彩网下载安卓版| www.996680.com-买彩票的正规软件| www.ij62.com-广东福彩短信投注| www.n19.net-彩票走势图106| www.65pz.com-卖体育彩票怎么提成| www.526872.com-福利彩票乐彩网| 幸运彩票网www.33598z.com| www.m30.top-三分钟时时彩万能码| www.828178.com-lg传统彩票-| www.951787.com-彩票能中吗-| www.og94.com-江苏福彩3d走势图| www.896142.com-中国福利彩票网购| www.963948.com-500w足彩-| www.fn19.com-福彩3d死规律口诀| www.46is.com-彩金项链图片和价格| www.0582.vip-福彩3d小军第4版| www.7713.com-山东分分彩开奖号码| www.847342.com-中彩网大乐透推荐号| www.480.cn-时时彩任三混选技巧| www.988667.com-微彩站app-| www.580174.com-全民彩票天天送8元| www.206793.com-刷彩金的骗局| www.289282.com-台湾5分彩走势图| www.519821.com-福彩3d高概率杀号| www.544985.com-精彩数学就在身边| 天天彩票www.101282.com| www.15bk.com-腾讯时时彩开奖数据| www.60216.com-福彩2d玩法票样| www.942941.com-百姓彩票时时彩| www.499028.com-初级彩票培训师| www.633209.com-竞彩篮球如何计算| www.54ny.com-中国移动官方彩票网| www.705777.com-彩发发下载-| www.83242.com-线上投彩带赚是什么| www.74197.com-七星彩七乐彩区别| www.7009.vip-快3d彩票归责| www.78201.com-五分钟快彩-| www.89xa.com-博彩代理赚钱吗| www.5720.vip-手机买福利彩票安全| www.up4.com-好123彩票走势图| www.yv37.com-釉中彩餐具的危害| www.852666.com-时时彩都有哪些漏洞| www.177451.com-快三中奖助手app| www.294350.com-幸运彩票能提现吗| www.w15.bid-福彩3d牛彩冈图迷| www.43ms.com-特彩吧49gcc| www.95vq.com-微信彩友多靠谱吗| www.pi7.com-腾讯彩票app| www.lh46.com-u9彩票ios下载| www.256005.com-e球彩助手官方下载| www.910688.com-福彩快三计算软件| www.713811.com-买福利彩票的软件| www.26929.com-网上的天天乐彩票| www.3471.cm-爱彩乐天津快乐十分| www.me57.com-糖果彩彩票-| www.603422.com-彩6网站怎样| www.866547.com-福彩3d昨天奖号| www.pl08.com-福彩自助北京快三| www.1610.cc-玛骓彩票游戏| www.35159.com-腾讯彩票负责人毛涛| www.051339.com-高频彩吧手机版| www.sr72.com-聚华体彩店-| www.276556.com-吉林快三和值| www.6253.biz-彩虹岛封魔8| www.8547.org-福利彩票站的游戏机| www.53677.cc-宝马集团彩票| www.603352.com-2006世界杯彩票| www.669426.com-彩神pk10计划| www.728055.com-长春福彩快3| www.798012.com-如何看懂彩票走势图| www.870493.com-152彩票邀请码| www.930068.com-彩票助赢软件下不了| www.984856.com-网赌高频彩怎么赚钱| www.062320.com-七天彩票骗局| www.133464.com-中国福彩选号助手| www.181169.com-中彩网是不是合法的| www.136113.com-彩票3000万软件| www.373810.com-好彩1出号走势| www.552549.com-玩彩票输了钱怎么办| www.668775.com-求福彩3d算胆公式| www.787707.com-彩宝彩票安卓版下载| www.563218.com-优博时时彩平台官网| www.yi22.com-体彩第19050期|