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.034530.com-时时彩对赌平台| www.eb68.com-彩票平台app下载| www.3lj.com-福利彩票8软件| www.65544.cc-双色球彩票分析大师| www.086021.com-金冠彩票骗局揭秘| www.975034.com-七乐彩杀号定胆专家| www.nc22.com-上海快三三同号单选| www.319316.com-彩票pc蛋蛋软件| www.408443.com-兰考结婚彩礼多少| www.538043.com-彩票国彩快3| www.948027.com-双色球杀号_彩经网| www.bf16.com-投彩是骗局吗| www.17uc.com-彩哥哥计划打不开| www.695.mobi-彩资科-| www.3ot.com-京彩集团是干什么的| www.303783.com-鑫彩网是不是假的| www.959460.com-时时彩5分钟计划| www.325672.com-海南今晚七星彩开码| www.782199.com-福利彩票3b解迷| www.910555.com-足彩即时比分澳客网| www.985700.com-买量竞彩比-| www.dt28.cc-彩福彩票最新版| www.60155.com-福彩新规-| www.026680.com-名气最大的黑彩平台| www.cr81.cc-有没有买快三的平台| www.647307.com-快三庄家是谁| www.31as.com-彩虹app分发| www.93087.com-福彩快3贴吧| www.6ar.com-购彩止损-| www.005088.cc-上期彩票得主| www.552252.com-壹玖玖彩票-| www.800838.com-银海彩票工作室3d| www.976641.com-利彩开奖排列三| www.nu19.com-乐福网彩票时时彩| www.273500.com-地区快三是真的吗| www.405241.com-山东体彩三亿| www.391230.com-七星彩打击海南私彩| www.774387.com-体彩七星彩购买规则| www.083118.com-高频彩app计划| www.456794.com-今期六开彩跑狗图片| www.45lc.com-红神体彩网c310| www.836811.com-世界杯竞彩足球彩票| www.937732.com-90彩票邀请码| 幸运彩票www.557089.com| www.86741.com-云南申游快三是哪里| www.049101.com-福彩3d东北双胆网| www.066739.com-苹果手机u9彩| www.200412.com-123彩票开奖查询| www.308199.com-湖南竞彩快三查询| www.385232.com-福彩孤舟预测| www.499860.com-金色之暗全彩单行本| www.761038.com-二分时时彩免费计划| www.996047.com-竞彩比分直播有料| www.km06.com-易彩堂的网址是多少| www.536097.com-3d立体动画彩铅| www.609516.com-七星彩17124期| www.670179.com-海南彩票网彩版下载| www.751084.com-玩彩票赚钱心态| www.820456.com-道教灵符彩票中奖符| www.890506.com-彩68完整源码| www.956363.com-快三彩票有哪些| 彩票A8www.fz34.com| www.cq88.com-国家手机购彩软件| www.tf10.com-吉林快三压大小单双| 幸运彩票www.986399.com| www.br08.com-彩票基本走势图大全| www.vy38.com-彩票知识图片大全| www.30241.com-福彩门户ok8us| www.m33.pw-彩票11选五技巧| www.40kd.com-重庆时时彩注册代理| www.308219.com-安徽福利彩票计算器| www.425446.com-体彩9刮刮乐| www.521586.com-五位数的彩票是什么| www.608352.com-派彩是不是回水| www.698174.com-龙凤彩票网站官网| www.500117.com-97o彩票-| www.cai455.com-快三助手下载安装| www.972113.com-大众彩票网安全吗| www.67539.com-怎样一夜暴富买彩票| www.237914.com-每日派彩-| www.022362.com-五分快三下载安装| www.716609.com-彩铅星空画法| www.130717.com-彩礼一般是怎么谈的| www.229705.com-彩票站点大全软件| www.304996.com-怎样选彩票网站平台| www.382650.com-中华彩票正规吗| www.471194.com-彩票中奖推送| www.75743.com-吉祥彩票官网| www.5728.com-新蔡福彩-| www.321822.com-人工智能彩票| www.465883.com-彩票怎么玩必输| www.bc31.cc-快三官网开奖| www.un3.cc-极速快三预测网站| www.699.date-科彩-| www.5426.vip-新彩彩票怎么样| www.19fi.com-彩仙阁可信吗| www.627474.com-荐彩唯彩看球| www.95dd.com-白菜网开户彩金| www.399371.com-二元买彩票的故事| www.573734.com-聊天彩票投资| www.548710.com-五亿彩网址-| www.672568.com-周六有哪些彩票开奖| www.766731.com-牛彩湖北快3走势图| www.zm40.com-数字彩票开奖结果| www.01966.com-痴迷彩票倾家荡产| www.160121.com-赢发彩票怎么邀请码| www.294811.com-快乐彩票平台正规吗| www.374144.com-体彩快报开奖号码| www.19198.com-云购彩票可靠吗| www.76188.com-彩博士软件出错了| www.y88.me-快彩网投网站| www.98lm.cc-怎样玩黑彩能挣钱| www.953651.com-福彩主任冯亚平| 9号彩票www.80767j.com| www.183836.com-银川福彩-| www.514998.com-中国福彩官网网址| www.701288.com-网上骗别人买彩票| www.0017.cn-易彩堂彩票下载安装| www.817586.com-体彩大乐透开将结果| www.927679.com-福利彩票欢乐生肖| www.986490.com-怎么网络刷彩票赚钱| www.ag50.cc-123会员彩票| www.267755.com-玩什么彩票最赚钱| www.8ty.cc-手机制作彩票走势图| www.660.cc-玩彩乐苹果版| www.4594.org-爱乐透彩票正不正规| www.25719.cc-彩库宝典ios| www.203809.com-体彩5d开奖结果| www.266722.com-河北快三豹子号推荐| www.038918.com-为啥彩票合法| www.386583.com-韩国90秒彩票| www.440296.com-贵港市福利彩票加盟| www.665521.com-七乐彩旋转阵矩| www.764829.com-彩票网站制作有哪些| www.876575.com-3d天天彩-| www.985533.com-竞彩足球14场规则| www.o40.com-彩票算法-| www.553191.com-53彩票官方app| www.528250.com-有没有预测彩票网站| www.800769.com-福彩3d彩图片| www.380923.com-三d福彩内部报2| www.or63.com-zg彩票-| www.7636.pw-美狮彩票软件下载| www.056992.com-体育彩票走势图大全| www.175293.com-乐彩网app下载| www.656969.com-时时彩稳赚不赔方案| www.809878.com-必赢彩票相关新闻| www.181601.com-体育彩票扑克3技巧| www.411789.com-彩票怎么玩视频| www.642986.com-美宝莲彩妆加盟| www.568281.com-前十名的彩票平台| www.701757.com-彩票店加盟电话号码| www.805312.com-山东彩色母粒厂| www.906933.com-中国福彩规则及奖金| www.974315.com-五福彩分分时时彩| www.cp823.com-福彩快3下载苹果| www.55497.com-大小彩票平台| www.209060.com-福彩排列3-| www.71jh.com-安徽福彩几点停售| www.1146.vip-晨兴彩票正规吗| www.6542.cn-领先彩票app下载| www.84865.com-彩圣福彩三d字谜| www.6174.vip-牛彩3d字谜汇总| www.187142.com-福彩快三分几个省|