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.756875.com-体育彩票9场中奖| www.986086.com-福利彩票收益分成| www.r95.org-测彩高手专家专栏| www.lx26.com-青海快三和值走图| www.677399.com-彩钢瓦围墙快速方法| www.774921.com-瑞彩网登录-| www.904576.com-大发彩票一分快三| www.986681.com-七乐彩三个号有奖吗| www.gw86.com-爱彩app彩票软件| www.171.me-彩票彩金对打| www.616968.com-黑客入侵彩票系统| www.987396.com-百胜快三软件| www.15186.com-极速时时彩计算公式| www.879956.com-内蒙福彩中心在哪里| 趣彩彩票www.c277.com| www.623552.com-宏发快三下载| www.187853.com-澳门六星彩开奖官网| www.807159.com-玛雅吧彩票游戏登录| www.996873.com-头奖彩票怎么了| www.nj16.com-竞彩足球购彩大厅| www.8rg.com-官方彩票白小姐| www.78nx.com-体彩晶晶解和值迷| www.643968.com-四季彩app下载| www.754654.com-玉泉路福利彩票站| www.971501.com-厦门福彩中心在哪里| www.2925.xyz-体彩店名称-| www.772554.com-最牛的彩票网名| www.866785.com-昨晚福彩开什么| www.936608.com-溢彩年华-| 彩票坊www.022cq.cc| www.23302.com-中国足彩馆-| www.50ms.com-足彩任九在线过滤| www.0512.cc-购彩平台信誉好的| www.03ag.com-强力巨彩-| www.416385.com-时时彩半顺最长遗漏| www.3499.top-现金彩网-| www.025335.com-481体彩开奖结果| www.83ga.com-体育彩票游戏玩法| www.236022.com-彩22下载平台| www.338204.com-今天七乐彩免费预测| www.425626.com-重庆时时彩高手攻略| www.48444.cc-竞彩足球竞彩版安卓| www.db40.com-人人彩票76907| www.5040.in-福彩3d杀码定胆| www.027952.com-探探上玩京东快彩的| www.166558.com-快三赌博案例| www.269218.com-彩票砍龙是什么| www.056095.com-中国福彩快乐十分| www.79306.com-华彩人生-| www.062245.com-欢迎光临台湾福彩| www.696895.com-乐迷炫彩下载| www.3288.mobi-五分彩万位定胆公式| www.16316.com-足球竞彩中奖计算器| www.80335.com-体彩排三的奖号| www.034540.com-破解时时彩计划网站| www.334394.com-湖北快三全天多少期| www.cp9368.com-福建福彩3d-| www.225.gg-90彩票是正规| www.7477.net-体彩官网申请开店| www.34531.com-福彩三d出奖| www.339593.com-爱彩乐开奖助手| www.467133.com-彩票百度-| www.405909.com-重庆时时彩倍投群| www.386486.com-彩票是人为控制的| www.578402.com-兰州开体彩店| www.729379.com-彩票66是哪个公司| www.906327.com-彩票种类ig-| www.996978.com-足彩任九奖金| www.d99.cc-足彩先买平再对冲| www.239.pw-三彩凤头壶-| www.63828.cc-足彩app有哪些| www.126409.com-泰安体彩大乐透| www.4333.biz-彩票3d报纸-| www.611077.com-南方双彩3d试机号| www.91ld.com-牛彩官网首页| www.66702.com-福彩3d助手安卓版| www.39cm.com-k彩游戏是骗局吗| www.194518.com-上海快3彩票结果| www.307494.com-好彩投彩票安全吗| www.200171.com-16号体彩-| www.23rp.com-体彩283胆拖玩法| www.4201.win-七彩通达-| www.282882.com-足球体彩玩法介绍| www.302291.com-快3彩票投注app| www.378759.com-3d双彩论坛图迷| www.479299.com-天津福利彩票网点| www.552032.com-彩乃奈奈番号| www.627544.com-新乐彩票登录平台| www.q10.org-官方彩票和传统彩票| www.318198.com-一分彩网站-| www.526922.com-时时彩技巧总结| www.614666.com-3a彩票手机客户端| www.686032.com-腾讯分分彩开奖历史| www.805339.com-中超竞彩足球| www.84bb.com-5号彩官方网站| www.104578.com-福彩主任冯亚平| www.50570.com-彩票对打反水| www.113234.com-足彩计算工具| www.40752.com-八号彩票手机版下载| www.104911.com-公牛福彩-| www.209443.com-福彩排列5开奖| www.76698.com-优彩彩票安全吗| www.77295.cc-旧好彩客app| www.099527.com-高频彩为什么要拉人| www.212191.com-一分快三漏洞| www.816435.com-福彩周六开什么彩票| www.879735.com-詹天佑福彩3d预测| www.xb10.com-贵州快三一天多少期| www.451915.com-乐彩彩票软件破解网| www.186874.com-三分快三跨度怎么看| www.3363.vip-足彩大赢家软件下载| www.8325.com-福彩代销证-| www.890166.com-3132彩票网站| www.92549.com-彩票提现退回| www.015230.com-七星彩经-| www.297611.com-体育彩票有唧些彩种| www.484277.com-报亭能开彩票么| www.594687.com-优乐彩安卓下载| www.682943.com-彩票o2o系统| www.815529.com-福彩乐吧网-| www.981494.com-l中国体彩官方网站| www.0454.loan-六色彩票-| www.495446.com-博彩app违法吗| www.37289.com-彩吧三d开机号今天| www.000193.com-新彩票平台-| www.111392.com-乐猫彩票-| www.200988.com-七星彩最新开奖结果| www.295322.com-体彩排列5中奖故事| www.360037.com-新彩网福体彩藏机图| www.80222.com-彩票吧反水-| www.476360.com-天天时时彩手机版3| www.858225.com-彩票输太多-| www.015934.com-七星彩排列五app| www.156885.com-重庆时时彩走势图表| www.293683.com-彩票南京-| www.268392.com-乐彩网3d字谜| www.132267.com-濮阳县彩礼-| www.cp1031.com-j江苏快三计划| www.06eg.com-水溶性彩铅品牌| www.660187.com-人工智能扫描彩票| www.253956.com-玩彩app-| www.318182.com-新版彩计划-| www.040048.com-新运十分彩计划| www.590010.com-足彩资讯中心| www.270208.com-567彩票cc版| www.375338.com-七星彩什么台开奖| www.26681.com-山东体育彩票网| www.172173.com-双色球快三开奖结果| www.98382.cc-竞彩310推荐| www.121906.com-彩票全买一遍多少钱| www.227303.com-分分快三好彩下载| www.603790.com-足彩自动分析软件| www.164001.com-体彩容错怎么买| www.364119.com-不让买世界杯彩票了| www.87898.com-中国足球体彩竞彩网| www.64hl.com-体彩大乐透奖金多少| www.34416.com-双色球乐彩网首页| www.353018.com-正规快三购彩平台| www.094900.com-彩吧图四版-| www.p01.xyz-玩彩网彩票官方网站| www.377063.com-明星彩票app网址| www.26629.cc-彩票平台怎么刷漏洞| www.45002.cc-中彩网开奖视频| www.5487.vip-彩虹六号本子无翼鸟|